javascript - 删除按钮正在删除所有 img 标签，而不是选定的标签

Question

这是我的图片 uploader :

我的添加完美图像的代码:

   jQuery(function($){

  // Set all variables to be used in scope
  var frame, selections, attachment,
      metaBox = $('#gallery-meta-box.postbox'), // Your meta box id here
      addImgLink = metaBox.find('.upload-custom-img'),
      delImgLink = metaBox.find('.delete-custom-img'),
      imgContainer = metaBox.find('.custom-img-container'),
      imgIdInput = metaBox.find('.custom-img-id' );
    // Add image from frame
    addImgLink.on( 'click', function( event ){

        event.preventDefault();

        // If the media frame already exists, reopen it
        if ( frame ) {
            frame.open();
            return;
        }

        // Create a new media frame
        frame = wp.media({
            title: 'Select Images',
            button: {
            text: 'Add Image'
            },
            multiple: true  
        });

        // When an image is selected in the media frame
        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 = $(this).find('img');

        console.log(galleryThumbnail);
}); 
}); 

当您观看图像 uploader 时，您可以看到删除链接。当我单击“删除”时，无论哪一个“删除”按钮为我提供了两者的 id，并且 src 的 id 相同，都没有关系。查看结果:

当我单击删除链接时，我需要有关当前图像的信息，而不是 div 元素内的所有图像。

希望有人能解释一下。

Answer 1

问题是，当您使用事件委托(delegate)来处理动态元素时，委托(delegate)是预先确定的，因此无法正确拾取元素

delImgLink = metaBox.find('.delete-custom-img'),

改变

imgContainer.on( 'click', delImgLink, ...

至

imgContainer.on('click', 'a.delete-custom-img',

那么 this 将是按钮，您可以使用 .closest().find() 或 .prevAll("img"查找相关图像).first() (或其他方法):

imgContainer.on('click', 'a.delete-custom-img', function(event){
    event.preventDefault();
    var galleryThumbnail = $(this).closest("li").find('img');
    console.log(galleryThumbnail);
}); 

<小时/>

在您的原始代码中，如果this是删除按钮，则

$(this).find('img')

不会像 find 那样找到任何子项，并且删除 anchor 下没有子项，因此 this 必须引用更高层的其他内容。