ToggleClass不起作用

我最近經歷了一種情況，如果您正在切換的css類出現在當前分配給該元素的類之前，那麼toggleClass不起作用。ToggleClass不起作用

下面的代碼：

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

小提琴：http://jsfiddle.net/x39zu3nf/2/

你可以從貼在上面擺弄的代碼中看到，toggleClass工作在一個按鈕，但是，從另外一個不能正常工作。

有人能告訴我爲什麼它的行爲不同嗎？

來源

2015-10-09 DinoMyte

因爲.yellow風格總是覆蓋'.red'風格，因爲CSS就是這樣工作的。 – Xufox

.yellow在CSS後聲明，所以它比.red優先color

您可以使用此：

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

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

來源

2015-10-09 18:07:50

然後可以將該函數分配給選擇器'「＃btn1，＃btn2」' - less代碼。 – Xufox

是的，這是真的，即使只是'按鈕'工作。 –

變化的第二個按鈕的代碼如下：

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

來源

2015-10-09 18:07:42

它實際上做的工作，但因此它在它具有優先級的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>

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

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

來源

2015-10-09 18:07:48 Gab

它的工作原理，當你點擊你：

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

來源

2015-10-09 18:15:04

ToggleClass不起作用

回答

相關問題