選擇由Firebase動態創建的元素

Question

我創建了一個網站，它顯示了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

Answer 1

我正在考慮您已經創建​​爲每個項目。

您只需從選定的項目中獲取​​並啓動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()); 
      }); 

}); 

當您在使用火力的方法push()它會自動爲您的記錄唯一鍵。使用set()或update()方法來創建您自己的自定義密鑰。