在調用addClass後jQuery切換不起作用

所以我有一個點擊功能來切換我的頁面上的按鈕。如果複選框被選中，我還有另一個功能可以爲按鈕添加一個類。我的問題是，如果類被添加到按鈕，然後點擊功能被觸發切換不會改變內聯樣式。在調用addClass後jQuery切換不起作用

$(".btn").click(function() { 
    $(".anotherBtn").toggle(); 
} 


function getsCalledWhenCheckBoxIsChecked() { 
    $(".anotherBtn").addClass("hideBtn"); 
} 

<style> 
.hideBtn { 
    display: none !important; 
} 
</style>

這是一個更大的系統的一部分，我大大簡化了代碼，只是爲了顯示通常發生的事情。當使用開發人員工具以鉻形式查看頁面時，我可以看到，當添加「hideBtn」類時，內嵌樣式在切換時不會更改，但它在其他元素上執行。當班級被刪除時，它再次運作。

切換工作

<button class="anotherButton" style="display: inline-block;"></button> 
<button class="anotherButton" style="display: none;"></button>

切換不會更改爲顯示：無

<button class="anotherButton hideBtn" style="display: inline-block;"></button> 
<button class="anotherButton hideBtn" style="display: inline-block;"></button>

任何想法或幫助表示讚賞。

來源

2014-10-10 Travus Gonzalez

你沒有用id元素'anotherBtn'所以'$（「＃anotherBtn」） ''必須是'$（「。anotherBtn」）'，我認爲問題的發生是因爲'.hideBtn'的'display：none;'被標記爲'！important' – 2014-10-10 17:19:41

什麼是$（「btn」）' ？ – showdev 2014-10-10 17:20:24

對不起，「#anotherBtn」是我寫這個問題的一個錯誤，沒有反映在實際的代碼中。 $（「btn」）只是觸發點擊功能的頁面上的另一個按鈕。不幸的是，我不能分享問題的生產代碼，但我會在一個小提琴上顯示這個錯誤。 – 2014-10-10 17:23:50

您的問題是，當您使用display: none !important;時，它將覆蓋toggle()將生成的內聯樣式style="display: inline-block;"。

的具體問題是使用!important

您可以通過檢查適用於該元素的CSS規則在瀏覽器控制檯證實了這一點。

有許多變通辦法，但第一個是看看你是否真的需要!important在所有

來源

2014-10-10 17:25:54 charlietfl

好的，這是這種情況，不幸的是我確實需要重要的東西，但是你的右邊的切換器認爲屬性是display：none，因此要顯示：inline-block，即使內聯樣式顯示爲：inline-block。你可以給我一個另一個解決方法的例子，我可以強制內聯樣式改變？ – 2014-10-10 20:21:20

可以用'cssText'屬性來查看，或者使用jQuery'attr（'style'，'display：inline-block！important'）' – charlietfl 2014-10-10 22:57:04

我個人的賭注是你可以很容易地讓你的css規則有一個更具體的選擇器，根本不需要「重要」 – charlietfl 2014-10-10 22:58:52

在調用addClass後jQuery切換不起作用

回答

相關問題