我需要移除当前给定类上的一个类，然后寻找下一个元素并设置相同的类。
我的jQuery和HTML:
<script type="text/javascript">
$("#next-usp").click(function(){
$('.usp-container-nav').removeClass('grey-bg').next('.usp-container-nav').addClass('grey-bg');
});
</script>
HTML
<div class="usp-nav-mobile">
<a id="nav-mob-1" class="usp-container-nav grey-bg"></a>
<a id="nav-mob-2" class="usp-container-nav"></a>
<a id="nav-mob-3" class="usp-container-nav"></a>
<a id="nav-mob-4" class="usp-container-nav"></a>
</div>
<a id="next-usp"></a>
我的问题是它选择了所有的.usp-container-nav，但是我需要它只选择下一个并删除当前的类。
问题在于，你实际上是在做:
$('.usp-container-nav').next('.usp-container-nav')
其中
$('.usp-container-nav')
选择所有nav项。 您希望只选择活动的nav项，从中删除活动项，移动到next并将活动项添加到新项:
$('.usp-container-nav.grey-bg').next('.usp-container-nav')
更新得代码段:
null
$("#next-usp").click(function(){
$('.usp-container-nav.grey-bg').removeClass('grey-bg').next('.usp-container-nav').addClass('grey-bg');
});.grey-bg { color:red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usp-nav-mobile">
<a id="nav-mob-1" class="usp-container-nav grey-bg">1</a>
<a id="nav-mob-2" class="usp-container-nav">2</a>
<a id="nav-mob-3" class="usp-container-nav">3</a>
<a id="nav-mob-4" class="usp-container-nav">4</a>
</div>
<a id="next-usp">next</a>
如果您希望它在4之后返回到1，可以使用以下命令:
var counter = 1;
$("#next-usp").click(function(){
if(counter == 4){
$('#nav-mob-'+counter).removeClass('grey-bg');
counter = 1;
$('#nav-mob-'+counter).addClass('grey-bg');
} else {
$('#nav-mob-'+counter).removeClass('grey-bg');
$('#nav-mob-'+(counter+1)).addClass('grey-bg');
counter++
}
});
您可以使用:first仅选择第一个下一个LI:
$("#next-usp").click(function(){
$('.usp-container-nav').removeClass('grey-bg').next('.usp-container-nav:first').addClass('grey-bg');
});
