javascript - jQuery:获取事件链接索引始终返回 0

Question

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

我的运算符(operator)总是会给我 -= 因为 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

也许你就是这个意思？

$('.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 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="active"><a href="#" class="another-class">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>