Question

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

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

的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

Answer 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()方法创建自己的自定义密钥。

选择由Firebase动态创建的元素

1 个答案: