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

【问题标题】：Why isn't the variable inside the function updated? (Scope, JQuery)为什么函数内部的变量没有更新？（范围，jQuery）
【发布时间】：2013-12-27 12:28:13
【问题描述】：

我有多个用于设置或更改图像的按钮。我环顾四周，看看这样的问题：Update global variable from jquery nested function，但我无法将我发现的内容转化为在这种情况下的相关性。 =/

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

问题：第二次点击按钮，第二次“console.log(button);”显示我点击的第一个按钮。

$('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(button) 正确地显示了我每次点击的按钮。

【问题讨论】：

第二个console.log(button); 位于事件处理程序中，仅在未创建上传器对象时附加，即仅在第一次点击时。因此，它将仅记录您首先单击的按钮。
关于如何在每次点击时更改 custom_uploader 中点击的按钮的值的任何想法？我的意思是，有没有一种方法更喜欢在每次点击时创建一个新的上传器？

标签： jquery scope

【解决方案1】：

正如@Comet 所说，解决此问题的最佳方法是从.on('click' 事件中取出var button; 并将其放在事件之前。然后单击处理程序将在每次触发时重新分配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 或其他东西。但是多一个变量肯定比每次点击重新创建自定义上传器更好。

【讨论】：

【解决方案2】：

你可以做一些事情来解决你的问题

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

这将解决您的问题，因为变量按钮将准确保存单击的按钮。

【讨论】：

（目前在 .on('select') 之外）我不想让它成为全球性的，这是一个更大系统的一部分。每次点击时它都会正确更改，这是 custom_uploader 不会在更改的按钮上拾取。

【解决方案3】：

我想一定有更好的方法来做到这一点。我现在将通过删除

来解决这个问题

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

因为它会为每次点击启动 on select 设置，因此它使用正确的按钮。我现在回顾一下今天和明天，以获得更好的（？）答案。 :)

感谢@berrunder。

【讨论】：