Question

我正在尝试使用jQuery向div添加一个“current”类，然后在单击另一个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');

将“当前”类添加到单击的元素并在单击另一个元素时将其删除？

4 个答案: