Question

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

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

我似乎无法将html代码粘贴到此处，因此我必须在块中执行此操作。随函附上所有代码的快照。

确保您有一个空的html页面。 doctype无关紧要。我在不同的doctypes上测试了它，但它仍然无法正常工作。

这是在标题

之后的样式blok中

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

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

在此之后，一个脚本blok在这里：

$(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");
});

}）;

在身体内部有一个名为＆＃34; maindiv＆＃34;的p标签。和一个班级＆＃34;正常＆＃34;

点击此处点击文字。

哦，我不能等到有人试试这个......它很疯狂，因为所有其他的方式的工作。但只有.addClass和.toggleClass才能正常工作

因为我是新用户，所以我不能在此处附上完整代码的快照，但你可以在以下网址下载： http://www.bckan.nl/temp/jquerybug.jpg

Answer 1

正如名称所示，addClass和toggleClass只是添加了类，这意味着你的元素仍然是.normal，它可能比.highlight具有更高的优先级，因此，你的颜色变化不适用。检查DOM，您将看到该类已添加。尝试用.highlight替换.normal而不是在CSS中添加.highlight或place .normal over .highlight。您还可以在.highlight的属性中添加！important，但不建议这样做。

Answer 2

尝试：

$(document).ready(function () {
    $('#maindiv').css('cursor', 'pointer');
    $('#maindiv').on('click', function() {
        $(this).toggleClass("highlight").toggleClass('normal');
    });
});

没有尝试你的代码，但我假设它增加了类很好，但是因为你永远不会删除“普通”类，所以css不会被覆盖。

另外为了优化，请尝试将.css保持在javascript中。将maindivs光标设置为指针可以很容易地在.css文件中设置。并且避免使用.click / .live / .bind等，它们已被弃用，并且所有这些都链接到新的.on函数。所以直接使用.on。

哦，在你的CSS中添加！imporant会起作用，但这也是你应尽量避免的事情，以后会让你更难。

在单击方法中使用带有JQuery的addClass或toggleClass不起作用？错误？

2 个答案: