按钮变量范围 - 如何更新父范围中的变量?jQuery.

button variable scope - how to update variable in parent scope? jQuery

本文关键字：变量 范围 jQuery 何更新 按钮 更新      更新时间：2023-09-26

更新了jsFiddle：http://jsfiddle.net/leongaban/NmH97/

我的主函数中有一个按钮状态修饰符函数和几个单击函数。

在更新父函数中的布尔值时遇到一些麻烦。我可以通过使用全局变量来解决这个问题，但我知道我不应该在这里这样做。

在下面的函数中，当单击 #toggle_company 时，我将布尔公司（默认情况下设置为 true）传递到 setupToggleButtons 函数中。然后切换当前状态，但原始company布尔值保持不变，您将如何将其写入目标并更新父函数wireSearchIcons中的变量公司？

var wireSearchIcons = function() {
    // Boolean Flags
    var company = true;
    var phone = true;
    var orange_on = '#F37B21'; var orange_off = '#f3cdb1';
    var green_on = '#3DB54A';  var green_off = '#d8e0c3';
    // Other code...
        $("#toggle_company").unbind('click').bind('click', function () {
            setupToggleButtons(company, '#toggle_company path', orange_on, orange_off);
        });
        function setupToggleButtons(bool, path, on, off) {
            var path = $(path);
            if (bool) {
                path.css('fill', off);
                bool = false;
                return bool;
            } else {
                path.css('fill', on);
                bool = true;
                return bool;
            }
            console.log(bool);
        }
}

在函数调用中使用变量时，将发送变量包含的值，而不是变量本身。更改参数不会影响值的来源变量。

Javascript 不支持通过引用发送参数，因此只需从函数返回值，并将其赋回变量：

    $("#toggle_company").unbind('click').bind('click', function () {
        company = setupToggleButtons(company, '#toggle_company path', orange_on, orange_off);
    });
    function setupToggleButtons(bool, path, on, off) {
        var path = $(path);
        if (bool) {
            path.css('fill', off);
            bool = false;
        } else {
            path.css('fill', on);
            bool = true;
        }
        return bool;
    }

编写一个很少的setupToggleButtons函数是没有意义的。 应将代码内联到单击处理程序中，或在设置函数中创建单击处理程序。

var wireSearchIcons = function() {
    // Flags
    var company = true;
    var phone = true;
    var orange_on = '#F37B21'; var orange_off = '#f3cdb1';
    var green_on = '#3DB54A';  var green_off = '#d8e0c3';
    // Toggle Button States
    $("#toggle_company").unbind('click').bind('click', function () {
        company = !company;
        $('#div_company').css('background', company ? orange_on : orange_off);
    });
    $("#toggle_phone").unbind('click').bind('click', function () {
        phone = !phone;
        $('#div_phone').css('background', phone ? green_on : green_off);
    });
}
wireSearchIcons();
相关文章：