Question

我有一个应用程序，您可以选择6个div的任意组合（由类active标记），然后是第7个div，选中时将清除所有其他组合。除了在第7个div中添加active类之外，我有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>

任何人都可以找出为什么最后一个有问题的div在点击时没有获得active课程？

Answer 1

交换行$('#q4-all').addClass('active');和 <{1}}围绕

您正在使用第一个添加它，然后使用第二个删除它。在这里，您要删除它，然后添加它。

Answer 2

正如另一个答案所示 - 交换行的顺序可以纠正问题。我还添加了逻辑来从＆＃34;全身＆＃34;中删除该类。选项，以便它不能与任何其他选项同时选择。与全身选择相同 - 如果您选择了全身，则取消选择单个选项。只是为了增加功能:)）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

当您点击第7个div（全身狗）时，您首先要添加一个类＆＃39; Active＆＃39;给他然后删除所有课程，所以它也删除了他的课程。您只需要更改订单。这应该有效：

$('.q4-answer').removeClass('active');

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

3 个答案: