为什么函数添加类在jQuery不工作?

Question

我试图添加类'a'标签上点击'li'标签。这是我第一次使用jQuery，可能我遗漏了什么

$('.nav-item').click( function() {
$(".nav-item a").removeClass("active");
$(".nav-item a").addClass("active");
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="1">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="2">
<a class="nav-link" href="#" >Right</a>
</li>
</ul>

Answer 1

$(".nav-item a")将选择所有nav-item，使用$(this)获取选中的item，然后它会选择被点击的.nav-item，然后你可以用find()来选择一个子，所以$(this).find("a")会选择被点击的.nav-item的a

片段

$('.nav-item').click( function() {
$(".nav-item a").removeClass("active");
$(this).find("a").addClass("active");
} );

.nav-item a{ text-decoration:none; color:blue; }
.nav-item a.active{ color:red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="1">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="2">
<a class="nav-link" href="#" >Right</a>
</li>

Answer 2

您必须使用$("a",this).addClass("active");而不是$(".nav-item a").addClass("active");，因为现在您将active类设置为所有<a>

this指的是你点击的元素，而$("a",this)意味着你在你点击的元素中寻找元素a。

$('.nav-item').click(function() {
$(".nav-item a").removeClass("active");
$("a",this).addClass("active");
});

a.active{
color:black}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="1">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="2">
<a class="nav-link" href="#">Right</a>
</li>