如果单击同一个类,则Jquery addClass removeClass

时间:2016-10-08 15:13:03

标签: jquery addclass removeclass toggleclass

以下代码有效。我还试图补充说,如果.hero-build-wrap已经将类添加到了英雄构建中,并且再次单击它就会将其删除。 我尝试使用.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>

1 个答案:

答案 0 :(得分:2)

删除添加类

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

如果您添加一个类,然后将该类添加到该类,则最终结果将是取消添加它

话虽如此,你可能也试图删除其他地方的课程,因为$().children是一个非常奇怪的电话

如果是这样,你可以做类似的事情:

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