Question

我使用下面的代码迭代了firebase数据来填充这些卡片

function retrieveProductList(data) {

var container = document.getElementById('listing_gallery');
container.innerHTML = '';

data.forEach(function(listingSnap) { // loop over all jobs
    var key = listingSnap.key;
    var Items = listingSnap.val();
    var productCard = `                  
                   <div class="col-sm-4">
                    <div class="card" onclick="showproductpage();" id="${key}">
                        <img class="card-img-top" src="${Items.ProductImageUrl}" alt="Card image cap">
                        <div class="card-block">
                            <h4 class="card-title">Firebase</h4>
                            <p class="card-title">${Items.NSN}</p>

                            <p class="card-text" id="product_price">${Items.Price}</p>
                            <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn btn-primary" onclick="Add_item_to_cart();">Add to cart</a>
                        </div>
                  </div>
        </div>
                    `;
    container.innerHTML += productCard;


})
}

该功能可以工作并显示所有需要的信息。我遇到的问题是当我点击它时如何在控制台中获取每个卡ID。我试过这个功能

 function showproductpage(){

 console.log("Product clicked")

 console.log(this.id);
 }

该功能仅显示＆＃34;产品点击＆＃34;在控制台中，id被标识为未定义。我做错了什么，如何修复它以显示卡片的火山底座ID？

Answer 1

您可以将对DOM元素的引用作为参数发送到showproductpage()函数，因此更新的调用变为showproductpage(this)。以下示例：

＆＃13;

function showproductpage(element) {
  console.log(element.id)
}

＆＃13;

<div class="card" onclick="showproductpage(this);" id="card_01">Click</div>

＆＃13;

function showproductpage() {
    console.log(event.target.id)
}

＆＃13;

<div class="card" onclick="showproductpage();" id="card_01">Click</div>

＆＃13;

firebase div Id未显示onclick

1 个答案: