使用jquery添加/删除类的更好方法 - Better way to add/remove class with jquery

Better way to add/remove class with jquery

我正在使用wordpress主题自定义程序来更改主题的配色方案，但我想知道是否有比下面更短的方法来实现这一点。非常感谢。

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

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

像一样尝试

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

所以它将是

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

也许您可以利用数据属性使代码更短且可调整：

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