jQuery .toggleClass不切換CSS類

對不起，這是一個令人難以置信的業餘問題，但對於我來說，我無法弄清楚我在這裏做錯了什麼。有沒有另一種方法我應該瞄準我的按鈕？jQuery .toggleClass不切換CSS類

HTML：

CSS：

#button { 
background-color: #AABF1A; 
cursor: pointer; 
font-size: 25px; 
padding: 5px; 
margin-right: 10px; 
border: 1px solid grey; 
} 

.highlight { 
background-color: #555BBB; 
cursor: pointer; 
font-size: 25px; 
padding: 5px; 
margin-right: 10px; 
border: 1px solid grey; 
}

的jQuery：

$(document).ready(function() { 
    $("#button").click(function() { 
     $(this).toggleClass("highlight"); 
    }); 
});

來源

2014-05-22 dpren

這是一個提交按鈕。您是否在做任何事情來阻止您的表單提交併重新加載頁面？ – j08691

如果在單擊按鈕時提交表單，您將看不到切換效果。單擊該按鈕會導致離開/刷新頁面。突出顯示功能不會顯示。如果您不希望通過點擊按鈕提交表單，請將按鈕類型從「提交」更改爲「按鈕」。 –

您的HTML是否有另一個具有相同ID'＃button'的元素？你有沒有和一些督察檢查課程不在那裏？或者你是否只是因爲你看到了你期望的風格？ –

jQuery代碼工作。問題是您的.highlight類沒有足夠高的特異性來覆蓋由#button選擇器放置在元素上的樣式。試着改變你的CSS這樣的：

#button.highlight { 
    background-color: #555BBB; 
}

來源

2014-05-22 20:33:08

爲什麼downvotes？他絕對正確！ – LcSalazar

對於downvoters，好的，是的，按鈕需要被阻止提交表單，但這就是爲什麼類的更改似乎'不起作用'。 –

假設OP有一個處理程序阻止提交表單（他可以，他沒有向我們顯示他的所有代碼），那麼這就是答案。 –

全碼：

$(document).ready(function() { 
$("#button").click(function(event) { 
    event.preventDefault 
    $(this).toggleClass("highlight"); 
}); 
});

工作小提琴：http://jsfiddle.net/robertrozas/9g8Jj/2/

來源

2014-05-22 20:39:37 Hackerman

jQuery .toggleClass不切換CSS類

回答

相關問題