                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

点击第三次之后背景不换了，怎么回事？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>toggle()方法绑定多个函数</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h3>toggle()方法绑定多个函数</h3>
        <input id="btntest" type="button" value="点一下我" />
        <div>我是动态显示的</div>
        
        <script type="text/javascript">

                $(function () {
                $("#btntest").toggle(
                         function(){
                            $("div").html("1111");
                            $("div").addClass("second");
                         },
                          function(){
                            $("div").html("2222");
                            $("div").addClass("third");
                        })      
                
            });

        </script>
    </body>
</html>

半梦半醒半浮生

2016-06-10

源自：jQuery基础课程 6-4

关注问题我要回答

360

操作

收起

2 回答

慕仰6432972
2016-07-07

参考下面的代码，因为class只是覆盖，，如果你用的是css，那么css会去重新设置，但是class只是覆盖，不会重新设置，具体我也不懂，但是你第一个函数里需要添加一个removeClass，这样才能把你的.third去除，然后重新添加second样式

          $(function () {
                $("#btntest").toggle(
                         function(){

                            $("div").addClass("second");
                            $("div").removeClass("third")
                             $("div").html("1111");
                             
                         },
                          function(){
                            $("div").html("2222");
                            
                            $("div").addClass("third");
                        })      
                 
            });