为什么我的媒体选择脚本只写入第一个输入域?

时间:2017-10-19 作者:Chris Stage

因此,我正在创建一个元盒,用于在postloop上显示几个额外的特征图像。在为额外的图像编写脚本之前,我一直在思考一些简单的事情。

以下是我目前掌握的情况:

two form fields

因此,我制作了一个脚本来调用媒体框,我可以让它写入我需要的内容,但当调用第二个媒体框时,它每次都会回写第一个媒体框,即使我的选择器应该不同。以下是脚本:

(function( $ ) {
    \'use strict\';


$(function() {
    var meta_image_frame;

    function saveImage(e,uiElement){

            e.preventDefault();

            if ( meta_image_frame ) {
                meta_image_frame.open();
                return;
            }

            meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
                title: meta_image.title,
                button: { text:  meta_image.button },
                library: { type: \'image\' }
            });

            meta_image_frame.on(\'select\', function(){
                var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();
                $(uiElement).val(media_attachment.url);
            });

            // Opens the media library frame.
            meta_image_frame.open();

    }

    $(\'#fa_img1-button\').click(function(e){
        saveImage(e,\'#fa_img1\');
    });

    $(\'#fa_img2-button\').click(function(e){
        saveImage(e,\'#fa_img2\');
    });

});


})( jQuery );
如您所见,我调用ID fa\\u img1-button和fa\\u img2-button来单击按钮,并调用表单字段的ID,即fa\\u img1&;2.

有什么想法?

1 个回复
最合适的回答,由SO网友:mmm 整理而成

这个问题是因为第一个“if”,好的文本字段中只设置了第一次

要改变这一点,您可以在HTML中添加一个“data”参数,并像这样更改JavaScript代码(查看中的修改meta_image_frame.on(\'select\'...)

(function($) {
    \'use strict\';

    $(function() {

        var meta_image_frame;

        function saveImage(e, uiElement) {

            e.preventDefault();

            if (meta_image_frame) {
                meta_image_frame.field = $("#" + $(e.target).data("field"));

                meta_image_frame.open();
                return;
            }

            meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
                title : "meta_image.title",
                button : {
                    text : "meta_image.button"
                },
                library : {
                    type : \'image\'
                }
            });

            meta_image_frame.on(\'select\', function() {
                var media_attachment = meta_image_frame.state()
                        .get(\'selection\').first().toJSON();
                meta_image_frame.field.val(media_attachment.url);
            });

            // Opens the media library frame.
            meta_image_frame.open();

        }

        $(\'#fa_img1-button\').click(function(e) {
            saveImage(e, \'#fa_img1\');
        });

        $(\'#fa_img2-button\').click(function(e) {
            saveImage(e, \'#fa_img2\');
        });

    });

})(jQuery);
您可以将其与以下HTML代码一起使用:

<input id="fa_img1" type="text" value=""/>
<br/>
<input id="fa_img1-button" type="button" data-field="fa_img1"
    value="Upload Image"/>
<br/>
<br/>

<input id="fa_img2" type="text" value=""/>
<br/>
<input id="fa_img2-button" type="button" data-field="fa_img2"
    value="Upload Image"/>
<br/>
<br/>

结束