Question

我已经设置了一个'媒体输入框'来使用WordPress媒体选择器选择图像，我正在使用jQuery从WordPress帖子对象中获取数据以插入到HTML预览字段中。这对于一个“媒体盒”很有效，但现在我想把它扩展到另外两个盒子。

我可以复制jQuery代码三次，每个媒体框只更改一行（包含parent var），但这非常WET。我正在努力改变我的jQuery来解释正在使用的个人媒体框...

<script type="text/javascript">  

    function add_image(obj) 
    {
        var parent=jQuery(obj).parent().parent('div.image_a');
        var inputField = jQuery(parent).find("input.meta_image_url");           
        var fileFrame = wp.media.frames.file_frame = wp.media({ multiple: false });     

        fileFrame.on('select', function() 
        {
            var wp_post = fileFrame.state().get('selection').first().toJSON();      

            inputField.val(wp_post.url);                
            jQuery(parent)
                .find("div.image_preview")
                .html('<img src="'+wp_post.url+'" height="50" width="100" />');
        });

        fileFrame.open();
    };

</script>

和HMTL

// First media box
<div class="image_a">
    <div class="image_url">
        <span>
            <label>Image A URL</label>
        </span>
        <input type="text"
            class="meta_image_url"
            name="image_b"
            value="<?php esc_html_e( $img_a_url ); ?>"
        />
    </div>
    <div class="image_preview">
        <img src="<?php esc_html_e( $img_a_url ); ?>" />
    </div>
    <div class="image_buttons">
        <input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
        <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
    </div>
</div>  


//Second media box
<div class="image_b">
    <div class="image_url">
        <span>
            <label>Image B URL</label>
        </span>
        <input type="text"
            class="meta_image_url"
            name="image_a"
            value="<?php esc_html_e( $img_b_url ); ?>"
        />
    </div>
    <div class="image_preview">
        <img src="<?php esc_html_e( $img_b_url ); ?>" />
    </div>
    <div class="image_buttons">
        <input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
        <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
    </div>
</div>  

//Third media box
<div class="image_c">
    <div class="image_url">
         ...

我不介意更改HTML以适应更改。随意想出一个更合适的标题。

Answer 1

您总是可以向add_image函数添加第二个参数：

<script type="text/javascript">  

function add_image(obj, parentSelector)
{
    var parent=jQuery(obj).parent().parent(parentSelector);
    var inputField = jQuery(parent).find("input.meta_image_url");           
    var fileFrame = wp.media.frames.file_frame = wp.media({ multiple: false });     

    fileFrame.on('select', function() 
    {
        var wp_post = fileFrame.state().get('selection').first().toJSON();      

        inputField.val(wp_post.url);                
        jQuery(parent)
            .find("div.image_preview")
            .html('<img src="'+wp_post.url+'" height="50" width="100" />');
    });

    fileFrame.open();
};

</script>

然后您可以更改您的onclick属性：

onclick="add_image(this, 'div.image_a')"

Answer 2

这似乎是jQuery plugin的绝佳候选人。使用插件，您将拥有一个漂亮的，可重复使用的组件，这似乎是您正在寻找的。

这里有一些可能让您入门的代码：

    $.fn.addImage = function() {
    // this -> context refers to selected elements.
    return this.each(function(){        // Returning this allows you to chain like other jQuery plugins
        var $this = $(this),
            $input = $this.find('input.meta_image_url')

        var fileFrame = wp.media.frames.file_frame = wp.media({ multiple: false });     

        fileFrame.on('select', function(){
            var wp_post = fileFrame.state().get('selection').first().toJSON();      

            $input.val(wp_post.url);                
            $this.find('div.image_preview')
                .html('<img src="' + wp_post.url + '" height="50" width="100" />');
        });

        fileFrame.open();
    });
};

在您的元素中添加一个公共类（例如.add-image），并且您可以像这样调用您的插件：

$('.add-image').addImage();

编辑：我还没有使用WordPress的文件插件，所以YMMV，但基于选择和操作一组元素的重复代码通常是一个插件的好地方。

将WET jQuery转换为DRY

2 个答案: