Better way to add/remove class with jquery

Question

I am using wordpress theme customizer to change color scheme of my theme but was wondering if there is any shorter way to achieve this from what i have below. Thank you.

wp.customize('orn_color_scheme',function( value ) {
    value.bind(function(to) {
    var $color;
    if($('body').hasClass('default')) { $color = 'default' }
    if($('body').hasClass('beige')) { $color = 'beige' }
    if($('body').hasClass('blue')) { $color = 'blue' }
    if($('body').hasClass('celadon')) { $color = 'celadon' }
    if($('body').hasClass('cherry')) { $color = 'cherry' }
    if($('body').hasClass('cyan')) { $color = 'cyan' }
    if($('body').hasClass('dark')) { $color = 'dark' }
    if($('body').hasClass('dirty-green')) { $color = 'green' }
    if($('body').hasClass('orchid')) { $color = 'orchid' }
    if($('body').hasClass('red')) { $color = 'red' }

    $('#orbitnews-color-scheme-css').attr('href', '<?php echo get_template_directory_uri(); ?>/layouts/colors/' + to + '.css');
    $('body').removeClass($color).addClass(to);
        });
    });

Why prefix your variable names with a $ ? This is not perl or php. — Pierre Arlaud
– Pierre Arlaud, Commented Nov 20, 2013 at 14:56
@ArlaudAgbePierre It's valid javascript. $ is often placed at the beginning of variables to signify the variable contains a jQuery collection — George
– George, Commented Nov 20, 2013 at 14:57
@oGeez But in this case, the variable is a simple string. The variable name is valid, but misleading for other developers. — Blazemonger
– Blazemonger, Commented Nov 20, 2013 at 14:58
@ArlaudAgbePierre Instead of saying +1, you can just upvote the comment. — Rick Suggs
– Rick Suggs, Commented Nov 20, 2013 at 14:59
This happens when some developers use jQuery before leaning basics of JavaScript. — Ram
– Ram, Commented Nov 20, 2013 at 15:00

adeneo · Accepted Answer · 2013-11-20 15:00:35Z

1

var colors = ['default', 
              'beige',
              'blue',
              'celadon',
              'cherry'
              ... etc
             ];

wp.customize('orn_color_scheme',function( value ) {
    value.bind(function(to) {
        var $color;
        $.each(colors, function(_, color)) {
            if ( $('body').hasClasss(color) ) {
                $color = color;
                break;
            }
        });
        $('#orbitnews-color-scheme-css').prop('href', '<?php echo get_template_directory_uri(); ?>/layouts/colors/' + to + '.css');
        $('body').removeClass($color).addClass(to);
    });
});

answered Nov 20, 2013 at 15:00

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GautamD31 · Accepted Answer · 2013-11-20 15:03:01Z

0

Try like

$('body').toggleClass( color , to);

So it will be

wp.customize('orn_color_scheme',function( value ) {
     value.bind(function(to) {
         var color;
         color = $('body').attr('class');
         $('#orbitnews-color-scheme-css').attr('href', '<?php echo get_template_directory_uri(); ?>/layouts/colors/' + to + '.css');
         $('body').toggleClass( color , to);
     });
});

edited Nov 20, 2013 at 15:03

answered Nov 20, 2013 at 14:55

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

techMonster · Accepted Answer · 2013-11-20 15:09:45Z

0

Maybe you can make use of data attribute to make the code shorter and adjustable:

HTML:

<body class="someclass1 someclass2 red" data-color="red"></body>

Javascript:

function(to) {
    var $color = $('body').data().color;

    $('#orbitnews-color-scheme-css').attr('href', '<?php echo get_template_directory_uri(); ?>/layouts/colors/' + to + '.css');

    $('body').removeClass($color).addClass(to).data("color",to);
}

answered Nov 20, 2013 at 15:09

techMonster

2261 silver badge3 bronze badges

Collectives™ on Stack Overflow

Better way to add/remove class with jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related