Question

我有一个包含3个链接的简单菜单，单击其中一个链接后，我会将活动类设置为该特定链接。我要实现的目的是查看单击了哪个元素，哪个元素具有活动类，以便可以在jQuery中制作动画。

我的运算符将始终给我-=，因为activeIndex始终为0，而clickIndex实际上是正确的。

有什么解决方案可以做到这一点？

$('.tabs').on('click', 'li > a', function() {
  let tabs = $('.tabs');
  let activeIndex = $('a.active', tabs).index();
  let clickedIndex = $(this).closest('li').index();

  let operator = (activeIndex > clickedIndex) ? '+=' : '-=';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li><a href="#" class="another-class active">Link 1</a></li>
  <li><a href="#" class="another-class">Link 2</a></li>
  <li><a href="#" class="another-class">Link 3</a></li>
</ul>

Answer 1

也许你是这个意思？

Factory

$('.tabs').on('click', 'li > a', function(e) {
  e.preventDefault();
  let $active = $('.tabs').find("li.active");
  let activeIndex = $active.index();
  let $clicked = $(this).closest('li');
  let clickedIndex = $clicked.index();
  $active.removeClass("active");
  $clicked.addClass("active");
  let operator = (activeIndex > clickedIndex) ? '+=' : '-=';
  console.log(activeIndex,clickedIndex,operator)
});

.active { background-color:red }

jQuery：获取活动链接索引始终返回0

1 个答案: