jquery - 在点击方法中使用 addClass 或toggleClass 与 JQuery 不起作用？漏洞？

Question

这看起来很简单..但它仍然无法正常工作。

如果你把类 .normal 放在 .hightlight 之上，我就可以工作了。但我不会改变 这里的风格..只是位置。这没有任何意义..

我似乎无法在这里粘贴 html 代码，所以我必须分块进行。我附上了 所有代码的快照。

确保您有一个空的 html 页面。文档类型并不重要。我在不同的文档类型上测试了它，但它仍然无法正常工作。

这是在标题后面的样式 block 内

.highlight { color:black; background-color:yellow; }
.normal {  color:white; background-color: blue; }

在此之后我有一个带有最新 jquery 代码源的脚本标记 http://code.jquery.com/jquery-latest.min.js

在此之后是一个脚本 block ，这里是:

$(document).ready(function () {
  $('#maindiv').css('cursor', 'pointer');
  $('#maindiv').click(function () {
    //alert("click");
   // $(this).toggleClass("highlight"); //this does not work!
   // $(this).addClass('highlight'); //this does not work!

   // $(this).attr("class", "highlight"); //this works
   // $(this).css("background", "yellow"); this works

    // the javascript way to do this works also fine.
    // var element = document.getElementById('maindiv');
    // element.setAttribute("class", "highlight");
});

});

在正文中有一个 p 标签，其 idname 为“maindiv”，类为“normal”

有文字请点击此处。

好吧，我等不及有人也尝试这个了..这太疯狂了，因为所有其他的 方式的工作。但只有 .addClass 和 .toggleClass 无法正常工作

因为我是新用户，所以我无法在此处附上完整代码的快照， 但您可以在以下位置下载: http://www.bckan.nl/temp/jquerybug.jpg

Answer 1

顾名思义，addClass和toggleClass只是添加类，这意味着您的元素仍然具有.normal，它可能比.highlight具有更高的优先级，因此，您的颜色更改不适用。检查 DOM，您将看到该类已添加。 尝试用 .highlight 替换 .normal，而不是仅仅在 CSS 中添加 .highlight 或将 .normal 放在 .highlight 上。您还可以将 !important 添加到 .highlight 的属性中，但不建议这样做。