如何解决如何使用jquery在它之前和之后同时选择相邻元素?
当我点击 li.active
之前和之后的 2 个相邻元素被激活。
class= active 不是固定的,它在到达结束元素时移动并重复(我在滑块中应用)
请注意:我不能使用 eq() 因为当前的活动元素会在每次鼠标点击时动态变化。
$("span#ccc").click(function(){
$("li.item").removeClass("aa");
$("li.item.active").removeClass("active").nextAll().eq(1).toggleClass("aa");
$("li.item.active").removeClass("active").next().prevAll().eq(0).toggleClass("aa");
});
html:
<span id="cccc"></span>
<ul class="container">
<li class="item">aa</li>
<li class="item">aa</li>
<li class="item">aa</li>
<li class="item active">aa</li>
<li class="item">aa</li>
<li class="item">aa</li>
</ul>
解决方法
这是一个例子,你可以对这两个元素做任何你需要的事情,例如我改变了文本的颜色。
$('.active').click(function(){
$('.aaa').removeClass('aaa');
$(this).removeClass('active');
$(this).prev().addClass('aaa');
$(this).next().addClass('aaa','active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
<li class="item">aa click me</li>
<li class="item">aa click me</li>
<li class="item">aa click me</li>
<li class="item active">aa click me</li>
<li class="item">aa click me</li>
<li class="item">aa click me</li>
</ul>
编辑: 在您留言后,我会按照您说的那样编辑代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。