JQueryアクティブなトグル/追加/削除クラスの問題

Question

私は選択した6つのdivを任意の組み合わせ（クラスactiveでマーク）してから、他のすべてをクリアする7番目のdivを選択できます。私はjqueryを除いて、第7桁にactiveクラスを追加しました。ここではフィドルです：

$(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（全身犬）をクリックすると、最初に彼に「アクティブ」というクラスを追加してからすべてのクラスを削除するので、クラスも削除されます。注文を変更するだけです。これはうまくいくはずです：

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

スワップラインあなたが最初にそれを追加した後、第2に、それを削除している

周り$('#q4-all').addClass('active');と $('.q4-answer').removeClass('active');。ここでそれを削除してから追加します。

Answer 3

他の答えとして、行の順序を入れ替えると問題が解決します。また、 "full body"オプションからクラスを削除するロジックを追加し、他のオプションと同時に選択することもできません。フルボディの選択と同じです。フルボディを選択すると、個々のオプションは選択解除されます。ただ、機能:)

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