选择由 Firebase 动态创建的元素答案

【问题标题】：Select element created dynamically by Firebase选择由 Firebase 动态创建的元素
【发布时间】：2018-01-23 16:37:39
【问题描述】：

我创建了一个网站，它显示了 Firebase 数据库中的照片。我希望当按下心脏按钮时返回带有所选图像网址的警报。

我遇到了问题，因为当我单击该按钮时，它会返回数据库中的所有网址，而不仅仅是我选择的动物的网址。

JavaScript/jQuery：

var read_db = firebase.database().ref('animais/Gato');

read_db.orderByKey().limitToLast(100).on("child_added", function (snapshot) {
    var animal = snapshot.key;
    var search_image = firebase.database().ref("animais/Gato/" + animal + "/_img/");

    search_image.once('value').then(function (snapshot) {
        let $parent = $('<div/>', {
            'class': 'div1'
        });
        let $limits = $('<div/>', {
            'class': 'border'
        });
        let $image = $('<img/>', {
            'src': snapshot.val(),
            'class': 'animal'
        });
        let $bar_like = $('<div/>', {
            'class': 'bar'

        });
        let $icon_like = $('<img/>', {
            'src': 'css/like.png',
            'class': 'icon_like',
            'id': 'btn_like'
        });

        $bar_like.append($icon_like);
        $limits.append($bar_like);
        $limits.append($image);
        $parent.append($limits).appendTo(".put_divs_here");

        $(document).ready(function () {
            $("#btn_like").click(function () {
                alert(snapshot.val());
            });
        });

Site screenshot:

Website

【问题讨论】：

标签： javascript jquery firebase firebase-realtime-database

【解决方案1】：

我认为您已经为每个项目创建了unique key。

您只需要从所选项目中获取 unique key 并触发 firebase-query。

   var id = 1234   //get selected element key here;
   var read_db = firebase.database().ref('animais/Gato/' + id);
   read_db.once('value').then(function (snapshot) {

       let $parent = $('<div/>', {
            'class': 'div1'
        });
        let $limits = $('<div/>', {
            'class': 'border'
        });
        let $image = $('<img/>', {
            'src': snapshot.val(),
            'class': 'animal'
        });
        let $bar_like = $('<div/>', {
            'class': 'bar'

        });
        let $icon_like = $('<img/>', {
            'src': 'css/like.png',
            'class': 'icon_like',
            'id': 'btn_like'
        });

        $bar_like.append($icon_like);
        $limits.append($bar_like);
        $limits.append($image);
        $parent.append($limits).appendTo(".put_divs_here");

        $(document).ready(function () {
            $("#btn_like").click(function () {
                alert(snapshot.val());
            });

});

当您在 firebase 中使用 push() 方法时，它会自动为您的记录生成唯一密钥。使用set() 或update() 方法创建您自己的自定义密钥。

【讨论】：