javascript - 仅定位单击的元素

Question

我做了一个简单的开关按钮。 类的变化很好，但是当我有此按钮的多个实例时，它不会保留原始选择。

提前致谢

HTML

<ul class="button-switch">
    <li><a href="#" class='active'>Spider-Man</a></li>
    <li><a href="#">Iron Man</a></li>
    <li><a href="#">Thor</a></li>
    <li><a href="#">Hulk</a></li>
</ul>

JQUERY

$('.button-switch li a').click(function(e) {
  e.preventDefault();
  $('.button-switch li a').removeClass('active');
  $(this).addClass('active');
});

JS fiddle 示例 https://jsfiddle.net/t1gsp90j/1/

Answer 1

您需要将删除类的选择器与包含单击的li 的ul 关联起来。试试这个:

$('.button-switch li a').click(function (e) {
    e.preventDefault();
    $('li a', $(this).closest('ul')).removeClass('active');
    $(this).addClass('active');
});

Updated fiddle

$(this).closest('ul').find('li a').removeClass('active'); 也会有同样的效果。