javascript - jQuery：获取活动链接索引总是返回 0

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>

标签： javascriptjqueryhtml

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>