0

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

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

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

在下面的函数中，当单击#toggle_company 时，我将 bool 公司（默认设置为 true）传递给setupToggleButtons函数。然后切换当前状态，但原始companybool 值不变，您将如何编写它来定位和更新父函数中的变量 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);
        }
}
4

2 回答 2

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;
    }
于 2013-10-29T19:22:13.117 回答
0

编写一个功能如此之少的 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();
于 2013-10-29T19:24:08.497 回答