按钮变量作用域-如何在父作用域中更新变量？ jQuery的

Question

Updated jsFiddle: http://jsfiddle.net/leongaban/NmH97/

Inside my main function is a button state modifier function and several click functions.

Having a bit of trouble updating the boolean values in the parent function. I could solve this by using global variables, but I know I shouldn't need to do that here.

In the function below, when #toggle_company is clicked I pass the bool company (which is set to true by default) into the setupToggleButtons function. The current state is then switched, but the original company bool value is unchanged, how would you write this to target and update the variable company in the parent function 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

When you use the variable in the function call, you will be sending the value that the variable contains, not the variable itself. Changing the parameter has no effect on the variable where the value came from.

Javascript doesn't support sending parameter by reference, so just return the value from the function, and assign it back to the variable:

    $("#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

It doesn't make sense to write a setupToggleButtons function that does so little. You should inline the code into the click handlers, or create the click handlers within the setup function.

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