javascript - 将 "current"类添加到单击的元素并在单击另一个元素时将其删除？

Question

我正在尝试使用 jQuery 将“当前”类添加到 div，然后在单击不同的 div 时删除该类。到目前为止，我已经添加了“当前”类，但我不确定如何从该 div 中删除“当前”类并将其应用于单击的新 div。

这是 Javascript:

$(document).ready(function() {
  $('#images div').click(function() {
    $(this).addClass('current');
    $('.bios .active').hide().removeClass('active');
    $('.bios div').eq($(this).index()).show().addClass('active');
  });
});

这是 HTML:

<div id="images">
    <div><div class="name">Name 1</div></div>
    <div><div class="name">Name 2</div></div>
    <div><div class="name">Name 3</div></div>
</div>
<div class="bios">
    <div>Bio 1</div>
    <div>Bio 2</div>
    <div>Bio 3</div>
</div>

所以我只想将“当前”类应用到被单击的 div 中的图像，并从可能具有它的任何先前 div 中删除该类。谢谢。

Answer 1

只需删除它所有 sibling 的类，因为当您决定在 DOM 中的其他地方使用 .current 时，具体可以避免混淆。

$(document).ready(function() {
    $('#images div').on('click', function() {
        $(this).addClass('current').siblings().removeClass('current');
        $('.bios .active').hide().removeClass('active');
        $('.bios div').eq($(this).index()).show().addClass('active');
    });
});