Jquery addClass removeClass 如果点击相同 class

Jquery addClass removeClass if clicking same class

下面的代码有效。我还想补充一点,如果 .hero-build-wrap 已经将 class 添加到 hero-build ,并且您再次单击它会将其删除。 我尝试使用 .toggleclass 而不是 .addClass 但没有用

$(function() {
  $(".hero-build-wrap").click(function() {
    $(".hero-build").removeClass("hero-selected");
    $(this).children(".hero-build").addClass("hero-selected");
  });
});

HTML:

<div class="hero-build-wrap">
   <a class="hero-mini hero-mini-assa">
     <img class="hero-hover-big" src="">
     <img class="hero-hover-small"src=">
   </a>
   <div class="hero-build hero-selected">
      <a href="">
        <p>This is a test</p>
      </a>
      <a href="">
        <p>Anothertest</p>
      </a>
   </div>
</div>

删除添加 class

的行
$(function() {
  $(".hero-build-wrap").click(function() {    
    $(this).children(".hero-build").toggleClass("hero-selected");
  });
});

如果您添加 class ,然后切换 class ,最终结果将是取消添加它


话虽如此,您可能还试图在其他地方删除 class,因为 $().children 是一个非常奇怪的调用

如果是这样,您可以执行以下操作:

$(function() {
  $(".hero-build-wrap").click(function() { 
    var $children =  $(this).children(".hero-build").toggleClass("hero-selected");
    $('.hero-selected').not($children).removeClass("hero-selected");
  });
});