按鈕鏈刪除以前的類

Question

我正在處理更改身體背景的代碼img。它適用於我點擊按鈕並更改img的按鈕。當我點擊第一個按鈕時，它可以工作，然後我點擊第二個按鈕，它也可以工作......但是當我再次點擊第一個按鈕時它不起作用。

我試了一些代碼來刪除以前的類，但它不起作用。我真的不太多代碼：'（

由於這裏是代碼：

<script type="text/javascript"> 
     $(document).ready(function(){ 

     $('.button1').click(function(){ 
      $('body').addClass('fondonieve1').siblings().removeClass('active'); 
     }); 
      $('.button2').click(function(){ 
      $('body').addClass('fondonieve2').siblings().removeClass('active'); 
      }); 
      $('.button3').click(function(){ 
      $('body').addClass('fondootono1').siblings().removeClass('active'); 

     }); 
     }); 
</script> 

Answer 1

你可以這樣

$('body').addClass('fondonieve1').siblings().removeClass('active').removeClass('fondonieve2'); 

再次removeClass所以你的代碼應該是這樣的

<script type="text/javascript"> 
     $(document).ready(function(){ 

     $('.button1').click(function(){ 
      $('body').addClass('fondonieve1').siblings().removeClass('active').removeClass('fondonieve2'); 
     }); 
      $('.button2').click(function(){ 
      $('body').addClass('fondonieve2').siblings().removeClass('active').removeClass('fondonieve1'); 
      }); 
      $('.button3').click(function(){ 
      $('body').addClass('fondootono1').siblings().removeClass('active').removeClass('fondonieve2'); 

     }); 
     }); 
</script> 

Answer 2

完整代碼

CSS

body {background-image: url(img/fondonieve1.gif);} 
.fondonieve1{background-image: url(img/fondonieve1.gif);} 
.fondonieve2{background-image: url(img/fondonieve2.gif);} 
.fondootono1{background-image: url(img/fondootono1.gif);} 
.fondootono2{background-image: url(img/fondootono2.gif);} 
.fondoplanoclaro{background-image: none; background-color:#FFF;} 
.fondoplanooscuro{background-image: none;background-color:#000;} 

腳本

<script src="http://www.google.com/jsapi?key=ABQIAAAABZGjjDpjmjbzLaNWBpdrWhRYfwzT-VuwidSQZM_JU-MUSrbEShR1efDdxuqpWPsjsfs1V_59FUTrxg" type="text/javascript"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript"> 
      $(document).ready(function(){ 

      $('.button1').click(function(){ 
       $('body').addClass('fondonieve1').removeClass('fondonieve2 fondootono1 fondootono2 fondoplanoclaro fondoplanooscuro'); 
      }); 
      $('.button2').click(function(){ 
       $('body').addClass('fondonieve2').removeClass('fondonieve1 fondootono1 fondootono2 fondoplanoclaro fondoplanooscuro'); 
      }); 
      $('.button3').click(function(){ 
       $('body').addClass('fondootono1').removeClass('fondonieve2 fondonieve1 fondootono2 fondoplanoclaro fondoplanooscuro'); 
      }); 
      $('.button4').click(function(){ 
       $('body').addClass('fondootono2').removeClass('fondonieve2 fondootono1 fondonieve1 fondoplanoclaro fondoplanooscuro'); 
      }); 
      $('.button5').click(function(){ 
       $('body').addClass('fondoplanoclaro').removeClass('fondonieve2 fondootono1 fondootono2 fondonieve1 fondoplanooscuro'); 
      }); 
      $('.button6').click(function(){ 
       $('body').addClass('fondoplanooscuro').removeClass('fondonieve2 fondootono1 fondootono2 fondoplanoclaro fondonieve1'); 
      }); 

      }); 
    </script> 

HTML

<button class="button1">Nieve1</button> 
<button class="button2">Nieve2</button> 
<button class="button3">Otoño1</button> 
<button class="button4">Otoño2</button> 
<button class="button5">Claro</button> 
<button class="button6">Oscuro</button>