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

你可以像这样删除ClassClass

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

所以你的代码应该是这样的

<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>

按钮链删除上一课

2 个答案: