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

Posted 2023-03-05

【中文标题】$(this).parent().find() 不起作用

【英文标题】：$(this).parent().find() is not working

【发布时间】：2014-07-28 20:23:43

【问题描述】：

我正在制作一个显示图像的 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);

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

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

【问题讨论】：

请更新您的代码到一些小提琴或jsbin、codepen，...我们有许多其他网站比所谓的pastebin好得多。看起来 pastebin 限制了某些国家或地区的访问，我无法访问该站点。

@king 对不起，这是一个 jsfiddle 的 javascript：jsfiddle.net/etzolin/DjADM

【参考方案1】：

媒体框架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中删除

【讨论】：

这很完美！我整天都在努力寻找答案。谢谢！