ToggleClass не работает

Question

Недавно я испытал сценарий, когда toggleClass не работает, если класс css, который вы переключаете, появляется перед классом, назначенным этому элементу.

Вот код:

<button id="btn1" class="red">This works</button> 
<button id="btn2" class="yellow">This doesn't work</button> 

<script> 
     $('#btn1').click(function(){ 
      $(this).toggleClass('yellow'); 
     }); 

     $('#btn2').click(function(){ 
      $(this).toggleClass('red'); 
     }); 
</script> 

<style> 
.red { color:red } 
.yellow { color: yellow } 
</style> 

Fiddle: http://jsfiddle.net/x39zu3nf/2/

Как видно из кода, размещенных на вышеуказанном скрипку, toggleClass работает на одной кнопке, но не работает на другой.

Может ли кто-нибудь сказать мне, почему он ведет себя по-другому?

Answer 1

.yellow объявлен позже в CSS, поэтому он имеет приоритет над .red для color

Вы можете использовать это:

$('#btn1').click(function(){ 
    $(this).toggleClass('yellow red'); 
}); 

$('#btn2').click(function(){ 
    $(this).toggleClass('yellow red'); 
}); 

Answer 2

изменить второй код кнопки для этого:

$(this).toggleClass('red').toggleClass('yellow'); 

Answer 3

Это на самом деле работает, но yellow класс определяется после red класса, так что имеет приоритет над ним.

Когда вы нажмете btn 1, он получит как class="yellow red".

Когда вы нажмете btn 2, он получит как class="red yellow".

Хороший способ решить эту проблему элегантно может использовать базовый класс и класс цвета, как this fiddle

CSS

.base { color:red } 
.yellow { color: yellow } 

HTML

<button id="btn1" class="base">This works</button> 
<button id="btn2" class="base yellow">Works also</button> 

JS

function toggleYellow(){ 
    $(this).toggleClass('yellow'); 
} 

$('#btn1').click(toggleYellow); 
$('#btn2').click(toggleYellow); 

Answer 4

Он работает, и при нажатии кнопки вы получаете:

<button id="btn1" class="red yellow">This works</button> 

<button id="btn2" class="yellow red">This doesn't work</button> 

Но приоритет селектора css показывает желтый c Olor. Но вы можете сделать так: https://jsfiddle.net/x39zu3nf/6/