[英]$(this).parent().find() is not working
我正在制作一个Wordpress小部件显示图像,并上传/更改此图像我使用Wordpress媒体上传器。
这是我正在使用的管理表单标记:
<p class="media-control"
data-title="Choose an image"
data-update-text="Choose image">
<input class="image-url" name="image-url" type="hidden" value="">
<img class="image-preview" src=""><br>
<a class="button" href="#">Pick image</a>
</p>
当我点击“.media-control a”时,会出现上传器,我可以选择一张图片。 但是当我选择了一个图像“.image-preview”和“.image-url”没有更新。
这是我的javascript: http : //jsfiddle.net/etzolin/DjADM/
一切都按预期工作,除了这些线:
jQuery(this).parent().find('.image-url').val(attachment.url);
jQuery(this).parent().find('.image-preview').attr('src', attachment.url);
当我这样写它们时,设置输入值并更新图像预览:
jQuery('.media-control .image-url').val(attachment.url);
jQuery('.media-control .image-preview').attr('src', attachment.url);
但由于我使用了多个这些小部件,因此它会更新每个小部件中的输入值和图像预览。
如何设置输入值并仅在我正在编辑的小部件中更新图像预览? 我究竟做错了什么?
在媒体框架的事件处理程序内部, this
不是单击的元素
var media_frame;
jQuery('.media-control a').live('click', function (event) {
var self = this;
event.preventDefault();
if (media_frame) {
media_frame.open();
return;
}
media_frame = wp.media.frames.media_frame = wp.media({
title: jQuery(self).parent().data('title'),
button: {
text: jQuery(self).parent().data('update-text'),
},
multiple: false
});
media_frame.on('select', function () {
attachment = media_frame.state().get('selection').first().toJSON();
jQuery(self).parent().find('.image-url').val(attachment.url); // set .image-url value
jQuery(self).parent().find('.image-preview').attr('src', attachment.url); // update .image-preview
// ^^ this is not the element from the click handler but the media frame
});
media_frame.open();
});
你应该使用on()
因为live()
已被弃用并从jQuery中删除
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.