Jquery 替换元素之间的类isn'；t在第一个元素上工作

当我切换到任何一张卡时，我不能选择返回默认卡，为什么

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\u card

的元素。由于第一个元素最初没有

.profile\u card

类，因此单击事件不会附加到它

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

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

---

但是，更好的方法是在元素之间使用一个公共类，然后在公共类之外添加一个

.is_selected

类。这样，事件侦听器将首先附加到所有元素：

更新的HTML：

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

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

违约
弗斯特

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

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

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

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

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