Question

下面是我的代码，假设是在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>

Answer 1

修复toggleClass调用，您只需要类名，而不是选择器：toggleClass('over')而不是toggleClass('p.over')。

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

<script type="text/javascript" language="javascript">
<script>

删除第一个。

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

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

另一种方法：在DOM准备就绪时执行脚本（通过将其包装在文档就绪回调函数中$(document).ready()）或使用jQuery＆＃39; on函数使用动态绑定。

以下是工作版本：http://jsfiddle.net/7g95yvyo/

最后，但并非最不重要的是，学会使用浏览器的控制台 - 它将在学习和调试JavaScript时帮助你。

Answer 2

css class是一个.whatever规则，您的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');

您正在切换element.class，但是toggleClass只需要一个类，而不是元素。

jQuery中的类切换

2 个答案: