I am trying to setup multiple instances of conditionally displayed items in the customizer. This code works for any one instance of the conditional_display() function, but won't do all three

(function() {


function conditional_display(conditional, condition_toggled) {
    wp.customize.control(conditional, function(control) {
        //conditions are the value(s) for controller that will trigger toggling
        conditions = condition_toggled.split(',');
        toggleControl = function toggleControl(value) {
            conditions.forEach(function(condition) {
                //this will get the condition that will result in display
                //and controllers of displayed items
                cond_display_control = condition.split('|');
                //separates out the controllers to be displayed
                controllers = cond_display_control[1].split('^');
                if (value == cond_display_control[0]) {

                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(true);
                    });
                } else {
                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(false);
                    });
                }
            });
        };

        toggleControl(control.setting.get());
        control.setting.bind(toggleControl);
    });
}
/**
 * Run functions when customizer is ready.
 */
wp.customize.bind('ready', function() {
    conditional_display('jma_gbs_site_border_control', 'yes|jma_gbs_site_border_color_control^jma_gbs_site_border_width_control^jma_gbs_site_border_radius_control');

    conditional_display('jma_gbs_modular_header_control', 'yes|jma_gbs_header_border_color_control^jma_gbs_header_border_width_control^jma_gbs_header_border_radius_control');

    conditional_display('jma_gbs_modular_footer_control', 'yes|jma_gbs_footer_border_color_control^jma_gbs_footer_border_width_control^jma_gbs_footer_border_radius_control');
});
})();

any thoughts?

I am trying to setup multiple instances of conditionally displayed items in the customizer. This code works for any one instance of the conditional_display() function, but won't do all three

(function() {


function conditional_display(conditional, condition_toggled) {
    wp.customize.control(conditional, function(control) {
        //conditions are the value(s) for controller that will trigger toggling
        conditions = condition_toggled.split(',');
        toggleControl = function toggleControl(value) {
            conditions.forEach(function(condition) {
                //this will get the condition that will result in display
                //and controllers of displayed items
                cond_display_control = condition.split('|');
                //separates out the controllers to be displayed
                controllers = cond_display_control[1].split('^');
                if (value == cond_display_control[0]) {

                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(true);
                    });
                } else {
                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(false);
                    });
                }
            });
        };

        toggleControl(control.setting.get());
        control.setting.bind(toggleControl);
    });
}
/**
 * Run functions when customizer is ready.
 */
wp.customize.bind('ready', function() {
    conditional_display('jma_gbs_site_border_control', 'yes|jma_gbs_site_border_color_control^jma_gbs_site_border_width_control^jma_gbs_site_border_radius_control');

    conditional_display('jma_gbs_modular_header_control', 'yes|jma_gbs_header_border_color_control^jma_gbs_header_border_width_control^jma_gbs_header_border_radius_control');

    conditional_display('jma_gbs_modular_footer_control', 'yes|jma_gbs_footer_border_color_control^jma_gbs_footer_border_width_control^jma_gbs_footer_border_radius_control');
});
})();

any thoughts?

• javascript
• theme-customizer

1 Answer 1

Yes - it looks like the variables you intended to create are just being reassigned each call. You should scope the variables to to the function using var before each:

        var conditions, toggleControl; // here.

        conditions = condition_toggled.split(',');
        toggleControl = function toggleControl(value) {
            conditions.forEach(function(condition) {
                var cond_display_control, controllers; // here.

                //this will get the condition that will result in display
                //and controllers of displayed items
                cond_display_control = condition.split('|');
                //separates out the controllers to be displayed
                controllers = cond_display_control[1].split('^');
                if (value == cond_display_control[0]) {

                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(true);
                    });
                } else {
                    controllers.forEach(function(controller) {
                        wp.customize.control(controller).toggle(false);
                    });
                }
            });
        };