Javascript 加上一句「；“当前”；类，并在单击另一个元素时将其删除？

我试图用jQuery将一个“current”类添加到一个div中，然后在单击另一个div时删除该类。到目前为止，我已经添加了“current”类，但我不知道如何从该div中删除“current”类并将其应用到单击的新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>

名字1
名称2
名字3
生物1
生物2
生物3

---

因此，我只希望将“当前”类应用于正在单击的div中的图像，并将该类从以前的任何div中删除。谢谢。

只需删除它的所有同级上的类，因为当您决定在DOM中的其他地方使用

.current

时，特定的类可以避免混淆

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

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

---

只需删除所有同级上的类，因为当您决定在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');
    });
});

---

您可以在添加之前删除所有当前类

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

---

您可以在添加之前删除所有当前类

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

---

只需添加

$（'#images div.current'）。removeClass（'current'）$（this.addClass（'current'）之前，请执行代码>
只需添加
$（'#images div.current'）。removeClass（'current'）$（this.addClass（'current'）之前，请执行代码>
'.当前'
感谢你们两位<代码>'.当前'
感谢你们两位！谢谢，已经有这么多好的解决方案了，你们太棒了！你应该接受其中一个答案谢谢，已经有这么多好的解决方案了，你们真是棒极了！你应该接受其中一个答案