这是我的图片 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 元素内的所有图像。
希望有人能解释一下。
最佳答案
问题是,当您使用事件委托(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
必须引用更高层的其他内容。
关于javascript - 删除按钮正在删除所有 img 标签,而不是选定的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49134242/