JQuery 开关灯问题，求大神指点

问题描述：

为啥点击只能使之变黑，再点就没反应了呀。。。

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#kgd").click(function () {
                $(document.body).toggleClass("night");          //没有就加，有就移除
            });
        });
    </script>
    <style type="text/css">
        .night{background-color:black;}
    </style>
</head>
<body>
    <input value="开关灯" id="kgd" type="button" />
</body>
</html>

答

IE是有这个问题，直接设置样式可以。。

            $("#kgd").click(function () {
                $(document.body).toggleClass("night");          //没有就加，有就移除
                document.body.style.backgroundColor = document.body.className=='night'?'black':'white'
            });

答

你js 只做了一个操作啊！！！

答

好吧我弄错了。。。不是这个原因

答

你这扯淡啊这不是对的么。。。

答

看看逻辑也知道啦，有加class，有去class吗？

答

你先要明白toggleClass的用法；的确是有了就不加，没有就加，但是是针对同级元素。一个页面只有一个body，所以你不管怎么操作都是一样的，但是如果用两个div去代替body试试，应该就没有问题了。

答

没问题了
<!DOCTYPE html>

$(function () { $("#kgd").click(function () { $(document.body).toggleClass("night"); //没有就加，有就移除 }); }); 
 .night{background-color:black;}

答

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#kgd").click(function () {
                $(document.body).toggleClass("night");          //没有就加，有就移除
            });
        });
    </script>
    <style type="text/css">
        .night{background-color:black;}
    </style>
</head>
<body>
    <input value="开关灯" id="kgd" type="button" />
</body>
</html>```

答

我在本地用jquery-1.4.4.js是没有问题的，
如果你这不行的话，建议换下Jquery版本试试。

答

这个应该是浏览器问题，我用IE不行，但是360就可以。

JQuery 开关灯问题，求大神指点

相关推荐