向單擊的元素添加“當前”類，然后在單擊另一個元素時將其刪除？

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

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

Answer 2

只需刪除類的所有同級對象，因為當您決定在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');
    });
});

Answer 3

您可以在添加所有當前類之前將其刪除。

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

但是，如果跟蹤當前版本並將其刪除，則性能會更好。

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

Answer 4

只需添加$('#images div.current').removeClass('current'); 在執行$(this).addClass('current');