admin管理员组文章数量:1327474
I am making a Wordpress widget showing an image, and to upload/change this image I use the Wordpress media uploader.
This is the admin form markup I'm using:
<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>
When I click ".media-control a" the uploader appears and I can pick an image. But when I've picked an image ".image-preview" and ".image-url" isn't updated.
Here's my javascript: /
Everything is working as intended except these lines:
jQuery(this).parent().find('.image-url').val(attachment.url);
jQuery(this).parent().find('.image-preview').attr('src', attachment.url);
When I write them like this, input value is set and image preview is updated:
jQuery('.media-control .image-url').val(attachment.url);
jQuery('.media-control .image-preview').attr('src', attachment.url);
But since I use more than one of these widgets it updates the input value and image preview in every widget.
How can I set the input value and update the image preview only in the widget I'm editing? What am I doing wrong?
I am making a Wordpress widget showing an image, and to upload/change this image I use the Wordpress media uploader.
This is the admin form markup I'm using:
<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>
When I click ".media-control a" the uploader appears and I can pick an image. But when I've picked an image ".image-preview" and ".image-url" isn't updated.
Here's my javascript: http://jsfiddle/etzolin/DjADM/
Everything is working as intended except these lines:
jQuery(this).parent().find('.image-url').val(attachment.url);
jQuery(this).parent().find('.image-preview').attr('src', attachment.url);
When I write them like this, input value is set and image preview is updated:
jQuery('.media-control .image-url').val(attachment.url);
jQuery('.media-control .image-preview').attr('src', attachment.url);
But since I use more than one of these widgets it updates the input value and image preview in every widget.
How can I set the input value and update the image preview only in the widget I'm editing? What am I doing wrong?
Share Improve this question edited Jun 7, 2014 at 19:59 Etzolin asked Jun 7, 2014 at 19:39 EtzolinEtzolin 331 gold badge1 silver badge5 bronze badges 2- 1 please update your code into some fiddle or jsbin, codepen, ... we have many other sites much better than the so-called pastebin. Looks like pastebin limits access from some countries or regions, I can't access that site. – King King Commented Jun 7, 2014 at 19:43
- @king Sorry, here's a jsfiddle with the javascript: jsfiddle/etzolin/DjADM – Etzolin Commented Jun 7, 2014 at 19:55
1 Answer
Reset to default 3Inside the event handler for the media frame this
is not the clicked element
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();
});
and you should be using on()
as live()
is deprecated and removed from jQuery
本文标签: javascript(this)parent()find() is not workingStack Overflow
版权声明:本文标题:javascript - $(this).parent().find() is not working - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742209482a2433440.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论