Question

所以我有一个点击功能可以切换页面上的按钮。我还有另一个函数，如果选中复选框，则会向该按钮添加一个类。我的问题是如果将类添加到按钮然后点击功能，则切换不会改变内联样式。

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


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

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

这是一个更大的系统的一部分，我已经大大简化了代码，只是为了显示通常发生的事情。使用开发人员工具在chrome中查看页面时，我可以看到，当添加“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>

感谢任何想法或帮助。

Answer 1

您的问题是，当您使用display: none !important;时，它会覆盖style="display: inline-block;"将生成的内联样式toggle()。

具体问题是使用!important

您可以通过检查适用于该元素的CSS规则在浏览器控制台中进行确认。

有许多变通办法，但第一个是看你是否真的需要!important

调用addClass后，jQuery切换不起作用

1 个答案: