更好的方式來添加/刪除類與jquery

我使用wordpress主題定製改變我的主題的顏色方案，但想知道是否有任何簡短的方式來實現這一點從我下面。謝謝。更好的方式來添加/刪除類與jquery

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

來源

2013-11-20 Jeton R.

多少類可以體內有？一個或多個？ –

爲什麼在變量名前面添加$？這不是Perl或PHP。 –

@ArlaudAgbePierre它是有效的JavaScript。 '$'通常放在變量的開頭，表示變量包含一個jQuery集合 – George

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

來源

2013-11-20 15:00:35 adeneo

嘗試像

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

來源

2013-11-20 14:55:16 Gautam3164

也許你可以利用數據的屬性，使代碼更短，可調：

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

來源

2013-11-20 15:09:45 techMonster

更好的方式來添加/刪除類與jquery

回答

相關問題