Question

我有多个用于设置或更改图像的按钮。我环顾了这样的问题：Update global variable from jquery nested function，但我无法将我发现的内容翻译成与此案例相关的内容。 = /

尝试这样做： 我的按钮可以有两个类中的一个（custom-meta-img-add，custom-meta-img-change）。当我点击一个类-add我正在创建一个图像时，如果我点击 - 更改，我就会更新相关图像的src。

问题：第二次点击按钮，第二次“console.log（按钮）;”向我展示了我点击的第一个按钮。

$('body').on('click', '.custom-meta-img-add, .custom-meta-img-change', function(e){
        e.preventDefault();
        var button = $(this);
        console.log(button);

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            console.log(button);
        });
        //Open the uploader dialog
        custom_uploader.open();
    })

你会如何尝试解决这个问题？第一个console.log（按钮）正确显示了我每次点击的按钮。

Answer 1

正如@Comet所说，解决这个问题的最佳方法是从var button;事件中取出.on('click'并将其放在事件之前。然后单击处理程序将在每次触发时重新分配button变量，而不是创建新的按钮变量，select处理程序将正确显示单击的按钮。这并不意味着将其设置为全局，只需将其置于外部范围，即document.ready处理程序，如下所示：

$(document).ready(function() {
    ....
    var button;
    $('body').on('click', '.custom-meta-img-add, .custom-meta-img-change', function(e){
        e.preventDefault();
        button = $(this);
        console.log(button);

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
               text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            console.log(button);
        });
        //Open the uploader dialog
        custom_uploader.open();
    });
    ....
});

当然，在这种情况下，最好使rename按钮更具体，例如metaImgButton或其他内容。但是，拥有一个变量肯定比每次点击重新创建自定义上传器更好。

Answer 2

您可以采取一些措施来解决问题

从var button;事件中取出.on并将其放在事件之前
像往常一样分配button = $(this);，只需跳过var，以便为全局变量button分配值$(this)。

这将解决您的问题，因为变量按钮将精确保持单击哪个按钮。

Answer 3

我想有必要有更好的方法来做到这一点。我现在可以通过删除

来解决这个问题

 //If the uploader object has already been created, reopen the dialog
 if (custom_uploader) {
    custom_uploader.open();
    return;
 }

因为它为每次单击启动on选择设置，因此它使用正确的按钮。我现在回过头来看看今天的情况。明天会有更好的（？）答案。：）

致@berrunder。

为什么函数内部的变量没有更新？（范围，JQuery）

3 个答案:

为什么函数内部的变量没有更新？ （范围，JQuery）

3 个答案:

为什么函数内部的变量没有更新？（范围，JQuery）