javascript - $(this).parent().find() is not working - Stack Overflow

admin管理员组

文章数量:1327090

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?

• javascript
• jquery
• jquery-selectors
• wordpress-theming
• this

Share Improve this question Follow edited Jun 7, 2014 at 19:59 Etzolin asked Jun 7, 2014 at 19:39 EtzolinEtzolin 3311 gold badge11 silver badge55 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Inside 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