元素之间的替换类不适用于第一个元素[重复]答案

【问题标题】：Replace class between elements isn't working on first element [duplicate]元素之间的替换类不适用于第一个元素[重复]
【发布时间】：2016-02-12 01:50:06
【问题描述】：

当我切换到任何卡时，我无法选择返回默认卡，为什么？

HTML

<div class="profiles_container">
    <div class="profile_card_selected">
        Default
    </div>
    <div class="profile_card">
        First
    </div>
    <div class="profile_card">
        Second
    </div>
    <div class="profile_card">
        Third
    </div>
</div>

$(".profile_card").click(function(){      
    $('.profiles_container').find(".profile_card_selected").removeClass("profile_card_selected").addClass("profile_card");
    $(this).removeClass("profile_card").addClass("profile_card_selected");
});

https://jsfiddle.net/e7eh5atd/

【问题讨论】：

标签： jquery

【解决方案1】：

问题在于您只是将单击事件侦听器附加到具有.profile_card 类的元素。由于第一个元素最初没有 .profile_card 类，因此不附加点击事件。

在不更改任何 HTML 的情况下，解决此问题的最简单方法是将 delegate the click event 设置为一个共同的祖先，以便在触发 click 事件时检查该类（而不是像以前那样在最初附加事件时）：

Updated Example

$('.profiles_container').on('click', '.profile_card', function() {
    // ...
});

或者，您也可以将事件侦听器附加到所有子元素，而不考虑它们的类：

Updated Example

$('.profiles_container').children().click(function() {
    // ...
});

但是，更好的方法是在元素之间使用一个公共类，然后在公共类之外添加一个.is_selected 类。这样做时，事件侦听器最初将附加到所有元素：

Updated Example

$('.profile_card').on('click', function() {
  $('.profile_card').removeClass('is_selected');
  $(this).addClass('is_selected');
});

更新的 HTML：

<div class="profiles_container">
  <div class="profile_card is_selected">
    Default
  </div>
  <div class="profile_card">
    First
  </div>

  <!-- ... -->
</div>

【讨论】：