Fatal编程技术网

Javascript jQuery中的类切换

javascript jquery

Javascript jQuery中的类切换,javascript,jquery,Javascript,Jquery,下面是我的代码，假设它是一个脚本，在jquery中使用toggleclass（）方法单击后更改正方形的颜色。我认为我的代码是正确的，但我不能让正方形改变颜色。我做错了什么？谢谢 这是我的密码： <!DOCTYPE html> <html> <head> <title>My Page</title> <script src="js/jquery-1.11.1.min.js"></

下面是我的代码，假设它是一个脚本，在jquery中使用toggleclass（）方法单击后更改正方形的颜色。我认为我的代码是正确的，但我不能让正方形改变颜色。我做错了什么？谢谢

这是我的密码：

<!DOCTYPE html>
<html>
    <head>
        <title>My Page</title> 
        <script src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" language="javascript">
        <script>
           $( "p" ).click(function() {
             $( this ).toggleClass( "p.over" );
           });
        </script>
        <style>
            p { background:#DAA520; font-weight:bold; cursor:pointer; 
                padding:5px;width:20%;}
            p.over { background: #ADFF2F; }
            span { color:red; }
        </style>
    </head>
    <body>
        <p>Click or double click here.</p>
        <span></span>
    </body>
</html>


我的页面
$（“p”）。单击（函数（）{
$（this.toggleClass（“p.over”）；
});
p{背景：#DAA520；字体大小：粗体；光标：指针；
填充：5px；宽度：20%；}
p、 超过{背景：#ADFF2F；}
span{颜色：红色；}
单击或双击此处
修复toggleClass调用，您只需要类名，而不需要选择器：
toggleClass（'over'）
而不是
toggleClass（'p.over'）

然后，有两个打开的脚本标记：

<script type="text/javascript" language="javascript">
<script>
移除第一个

接下来，将事件侦听器绑定到脚本执行时尚不在DOM中的元素

简单修复：将脚本移动到页面底部

另一种方法：在DOM就绪时执行脚本（通过将其包装在文档就绪回调中：），或者使用jQuery函数使用动态绑定

以下是一个工作版本：

最后，但并非最不重要的一点是，学习使用浏览器的控制台-它将在学习和调试JavaScript时对您有极大的帮助。

css
类是一个
规则。无论
规则如何，您的css定义中没有任何类，只有元素


.foo { color: puce } /* this is a class */
p { color: chartreuse } /* this is an element */
p.foo { color: aubergine } /* this is an element AND a class */

toggleClass('foo');



您正在切换
元素。类
，但toggleClass只需要一个类，而不需要元素。
toggleClass（“over”）
要在单击的
p
上切换类。您现在要做的是在单击的
p
上切换类
p.over
。您还需要将代码包装在文档就绪调用中，或者将其放在文档末尾。否则，它试图引用尚不存在的元素。另外，这一行应该做什么：
？是时候学习一些关于基本jQuery使用的教程了