$(this).parent().find()不起作用。

Question

$(this).parent().find()不起作用。

javascriptjqueryjquery-selectorswordpress-themingthis

3

我将制作一个显示图片的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);

但是由于我使用了多个部件，它会更新每个部件中的输入值和图像预览。

我该如何在仅编辑的部件中设置输入值并更新图像预览？我做错了什么？

- Etzolin

1

请将您的代码更新到一些fiddle或jsbin、codepen等网站上，我们有许多比所谓的pastebin更好的网站。看起来pastebin限制了一些国家或地区的访问，我无法访问该网站。 - King King

@king 抱歉，这里有一个带有javascript的jsfiddle链接: http://jsfiddle.net/etzolin/DjADM/ - Etzolin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

在媒体框的事件处理程序中，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中删除。