jQuery Active切换/添加/删除类问题

liz 发表于 Dev

丽兹

我有一个应用程序，您可以在其中选择是否选择6个div的任意组合（以class标记active），然后选择第7个div，将其选中后将清除所有其他div。除了将active类添加到第7个div之外，我正在使用jquery 。这是一个小提琴：

$( document ).ready(function() {
    $('.q4-answer').on('click', function() {
       $(this).toggleClass('active');
    });
    $('#q4-all').on('click', function() {
       $('#q4-all').addClass('active');
       $('.q4-answer').removeClass('active');
    });
});

.answer {
  display: inline-block;
  width: 10%;
  border: solid thick white;
  text-align: center;
}

.answer img {
  width: 30px;
}

.answer.active {
  background-color: yellow;
  border: solid thick black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="q4-legs" class="answer q4-answer">
  <img src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
  <p>Legs</p>
</div>

<div id="q4-chest" class="answer q4-answer">
  <img  src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
  <p>Chest</p>
</div>

<div id="q4-back" class="answer q4-answer">
   <img  src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
   <p>Back</p>
</div>

<div id="q4-biceps" class="answer q4-answer">
   <img  src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
   <p>Biceps</p>
</div>

<div id="q4-triceps" class="answer q4-answer">
   <img src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
   <p>Triceps</p>
</div>

<div id="q4-shoulders" class="answer q4-answer">
   <img src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-grumpy-icon.png" />
   <p>Shoulders</p>
</div>

<div id="q4-all" class="answer q4-answer">
    <img alt="A full body workout. Huzzah!" src="https://s-media-cache-ak0.pinimg.com/236x/d3/11/eb/d311eb7f9e927ea7ba604387f6278558.jpg" />
     <p>Full Body</p>
</div>

任何人都可以弄清楚为什么最后一个有问题的divactive在单击时没有上课吗？

达米安·巴托西克（Damian Bartosik）

当您单击7th div（全身狗）时，您首先要向他添加一个“活动”类别，然后删除所有类别，因此也会删除其所有类别。您只需要更改订单即可。这应该工作：

$( document ).ready(function() {
    $('.q4-answer').on('click', function() {
       $(this).toggleClass('active');
    });
    $('#q4-all').on('click', function() {           
       $('.q4-answer').removeClass('active');
       $('#q4-all').addClass('active');
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。