- jquery只为当前父类添加类

  显示原文与译文双语对照的内容
76 3

在给定的列表中,我希望当我点击'单击,然后'红色'类应仅适用于当前'李'当我击中'时,单击'在第二个下''然后应用两个类'李"如何阻止这里。

$(".thumb").click(function() {
 $(this).closest(".scroll-demo").addClass("red");
});
.red {
 color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
</ul>
时间:原作者:0个回答

54 5

添加 $(".scroll-demo").removeClass("red");

 $(".thumb").click(function() {
 $(".scroll-demo").removeClass("red");
 $(this).closest(".scroll-demo").addClass("red");
 });
原作者:
116 0

使用 .removeClass() 方法移除 red 类的其他元素

$(".red.scroll-demo").removeClass('red');
$(".thumb").click(function() {
 $(".red.scroll-demo").removeClass('red');
 $(this).closest(".scroll-demo").addClass("red");
});
.red {
 color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
 <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
</ul>
原作者:
...