Question

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

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>

JS

$(".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/

Answer 1

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

在不更改任何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>

元素之间的替换类不适用于第一个元素

1 个答案: