JQuery主動切換/添加/刪除類問題

Question

我有一個應用程序，您可以選擇任何6個divs的組合作爲選擇或不選擇（標記類active），然後第7個div，當選擇清除所有其他。我有jQuery的工作，除了增加active類到第七個div。這裏有一個小提琴：

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

當你點擊7th div（Full body dog）時，你首先給他添加一個'Active'類，然後刪除所有的類，這樣它就會刪除他的類。你只需要改變順序。這應該工作：

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

Answer 2

互換額度$('#q4-all').addClass('active');和 $('.q4-answer').removeClass('active');周圍

您與所述第一相加，然後用第二除去它。在這裏你想刪除它，然後添加它。

Answer 3

作爲其他答案表明 - 交換行的順序糾正問題。我還添加了從「全身」選項中刪除班級的邏輯，以便它不能與任何其他選項同時選中。與全身選擇相同 - 如果您選擇了全身，則會取消選擇個人選項。只是爲了增加功能:)

$(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'); 
 
    }); 
 
});

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