Question

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

我的主要功能是按钮状态修改器功能和几个点击功能。

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

在下面的函数中，当单击#toggle_company时，我将bool公司（默认设置为true）传递给setupToggleButtons函数。然后切换当前状态，但原始company bool值未更改，您如何将其写入目标并更新父函数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);
        }
}

Answer 1

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

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;
    }

Answer 2

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

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();

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

2 个答案: