按下按钮获取照片ID

Question

所以我正在尝试获取按钮附加到（下方）的照片的ID，但是遇到了一些麻烦。

我使用JavaScript innerHTML动态插入，一切正常：这是我创建图像以及按钮和描述等的代码。

for (var i = 0; i < photos.length; i++) {

        htmlStr += '<div class="images"> <figure> <a href="' + photos[i].largeURL +
            '" data-lightbox="watches" data-title=' + photos[i].description + '><img src=' + photos[i].thumbnail + ' ' +
            'alt=”Photo” width=150 height=150></a><figcaption>' + photos[i].description
            + "<br> total likes " + photos[i].likes + "<div id='btnDelete'><input type='button' onclick ='unlikePhoto(photos.id)'value='Like' id='btnDeleteID'></div>" + ' </figcaption></figure></div>'
        //console.log(htmlStr);


    }

HTML：

<div class="imagesArea" id="imageArea">
<div class="images">

</div>
    <div class="images">

    </div>

我无法弄清楚每个动态插入的图像是什么，如何让按钮按下抓取动态创建图像时定义的ID？甚至描述等。\

编辑：图片：

Answer 1

如果您通过将值设置为图片的id或data-属性来修改HTMLString，并使用this将引用传递给点击按钮，如下所示：

htmlStr += "<div class='images'>"
          + "<figure>"
            + "<a href='" + photos[i].largeURL +"' data-lightbox='watches' data-title='"+ photos[i].description + "'>"
              +"<img id='"+photos[i].id+"' src='" + photos[i].thumbnail + "' alt='Photo' width=150 height=150>"
            +"</a>"
            +"<figcaption>"+ photos[i].description + "<br> total likes " + photos[i].likes
              + "<div class='btnDelete'><input type='button' onclick ='unlikePhoto(this)' value='Like' class='btnDeleteID'></div>"
            +"</figcaption>"
         +"</figure>"
       +"</div>"

然后，您可以使用jquery访问相应的图像id，如：

function unlikePhoto(elm){
 var photoId  = $(elm).closest(".images").find("img").attr("id");
};

附注：多个具有相同id的元素无效，因此请将其更改为类名

Answer 2

将循环更改为这样的位置，为每个图像分配ID

for (var i = 0; i < photos.length; i++) {

    htmlStr += '<div class="images"> <figure> <a href="' + photos[i].largeURL +
        '" data-lightbox="watches" data-title=' + photos[i].description + '><img src=' + photos[i].thumbnail + ' ' +
        'alt=”Photo” id=' + photos[i].id + ' width=150 height=150></a><figcaption>' + photos[i].description + "<br> total likes " + photos[i].likes + "<div class='btnDelete'><input type='button' value='Like' class='btnDeleteID'></div>" + ' </figcaption></figure></div>';
    //console.log(htmlStr);


}

删除onclick（使用它是不好的做法）并使其像这样

$(document).on('click', '.btnDeleteID', function() {    
    var photoID = $(this).closest(".images").find("img").attr("id");
    unlikePhoto(photoID);
});