javascript - .addClass 仅添加到无序列表中被单击的项目符号

Question

我有一个带有两个项目符号的简短无序列表。

我添加了一些 Javascript，因此当我单击项目符号时，它会为其添加一个类。

问题是，它将类添加到所有现有的 li 中，而不仅仅是我单击的那个。

这是 JSFiddle：http: //jsfiddle.net/4sa8T/

Javascript：

$("#items li a").click(function(){

$("#items li").addClass("newClass");

});

html:

<div id="content">
    <ul id="items">
    <li><a href="#">Hello</a></li>
    <li><a href="#">Bye</a></li>    
    </ul>
</div>

Answer 1

$("#items li a").click(function(){
    $("#items li").addClass("newClass");
});

应该

$("#items li a").click(function(){
    $(this).parent().addClass("newClass");
});

$(this).parent()将引用特定li元素，并$('#items li')引用所有 lis 下#items

Answer 2

最适合您的解决方案是使用：

$(this).toggleClass('newClass');

美元这表示使用特定的点击元素...

toggleClass是一种通过再次单击元素来删除添加的类的简单方法。

这是一个演示jsfiddle