jQuery刪除按鈕正在選擇所有圖像src和id（多次上傳）

Question

我正在嘗試為ImageUploader創建一個刪除按鈕。 選擇圖片並將其放在頁面的div元素中沒有任何問題，這全都與刪除當前圖片有關。

當我點擊刪除按鈕時，它會給我所有的ID和src，而不是帶有刪除按鈕的當前當前ID。 看看我的刪除按鈕，我在哪里做控制台日志src和id。 它給了我所有的ID和src，我確實想要當前ID和src。

有人有解決方案嗎？

這是完美的選擇作品。

    frame.on( 'select', function() {
        // Get media attachments details from the frame state
        selections = frame.state().get('selection');
        selections.map(function(attachment){
            attachment = attachment.toJSON();

            // Send the attachment URL to our custom image input field
            imgContainer.append(
              '<li>'    
            + '<img data-attachment-id="id-media-1993'+attachment.id+'" src="'+attachment.url+'" class="gallery-thumbnail" alt="'+attachment.title+'" style="max-width:150px; max-height:150px;"/>'
            + '<a class="delete-custom-img" href="#">Remove Image</a>'
            + '</li>');
            // Send the attachment id to our hidden input
            imgIdInput.val(attachment.id);

            console.log(attachment);
        });
    });

    // Finally, open the modal on click
    frame.open();

});

這是我的刪除按鈕

imgContainer.on( 'click', delImgLink, function(event){
    event.preventDefault();
    var galleryThumbnail = $('.gallery-thumbnail');
    var galleryThumbnailID = $('.gallery-thumbnail').data('attachment-id');         
    var galleryThumbnailSrc = $('.gallery-thumbnail').attr('src');

    $(galleryThumbnail).each(function(){
        var imgSrc = $(this).attr('src');
        console.log(imgSrc);
    });

    $(galleryThumbnail).each(function(){
        var imgIDs = $(this).data("attachment-id");
        console.log(imgIDs);
    });

}); 

在控制台中輸出圖像ID

Answer 1

您可以從按鈕中選擇父元素，然后從那里查找要查找的內容。

像這樣的東西

var img = $(this).closest('li').find('.gallery-thumbnail');
var galleryThumbnail = img;
var galleryThumbnailID = img.data('attachment-id');         
var galleryThumbnailSrc = img.attr('src');

Answer 2

起初，我認為添加這樣的事件處理程序會減少混亂：

$('.delete-custom-img').click(function() {...});

要么

$('.delete-custom-img', imgContainer).click(function() {...});

如果您不想將事件處理程序添加到imgContainer之外，則此類具有其他元素。

但這是個人喜好，所以我想提一個問題：問題是您在頁面上出現了所有的'.gallery-thumbnail'，因為您沒有指定要查找的jQuery范圍（例如上面的imgContainer） 。 因此，單擊刪除按鈕時，它就在刪除按鈕的范圍內。 在您生成的標記中，它與縮略圖共享同一父對象，因此您可以執行以下操作：

var galleryThumbnail = $('.gallery-thumbnail', $(this).parent());

第二個參數指定jQuery搜索帶有'.gallery-thumbnail'類的元素的范圍。

還沒有測試過，但是我很確定這可以解決您的問題。

干杯，莫