在调用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切换不起作用

回答

相关问题