Question

我正在使用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);
        });
    });

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

Answer 2

尝试

$('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);
     });
});

Answer 3

也许你可以利用数据属性来缩短和调整代码：

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

使用jquery添加/删除类的更好方法

3 个答案: