Question

这是我的图片上传者：

My Image Uploader LINK

我的代码，用于添加完美的图片：

   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);
}); 
});

当您观看图片上传器时，您可以看到删除链接。当我点击删除时，删除按钮中的哪一个并不重要，它给我的两个id和src的ID相同。见结果：

RESULT AFTER CLICK IN CONSOLE

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

希望有人可以解释一下。

Answer 1

问题在于，当您使用事件委派处理动态元素时，委派是预先确定的，因此无法正确获取元素

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')

找不到任何内容，因为查找子项目并且删除锚点下没有子项目，因此this必须引用其他内容，更高级别。

Answer 2

您需要jquery closet()来查找最近的img，然后将其删除。或者你可以通过

来做到

$(this).parent().find('img');

Answer 3

要实现预期的reult，请使用以下选项将事件添加到imageContainer图像，$（this）将提供所选图像的详细信息

  $(".imgContainer img").on( 'click',  function(event){
        event.preventDefault();
        var galleryThumbnail = $(this);

        console.log(galleryThumbnail[0].id);
});

https://codepen.io/nagasai/pen/VQJoZj

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

3 个答案: