使用 JQuery 单击时更改按钮的背景颜色不起作用

Question

我有一个按钮，当用户单击它时我想改变它的颜色，但它不起作用，我不知道为什么。

这是我到目前为止所尝试的。

 $(document).ready(function() { }); $('#canvasButtons button').click(function () { $('#canvasButtons').children().removeClass('selected-button'); $(this).addClass('selected-button'); });

 .video-buttons button { width: 200px;important: height; 66px:important; background-color: #484848;important: cursor; pointer.important: margin-right; 50px; } .selected-button { background-color: red !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons"> <button id="modifyButton"> <div class="vertical-line"></div> <span>Modify B Box</span> </button> </div>

我在这里添加了代码片段。 你能告诉我为什么它不起作用吗？

Answer 1

您在 CSS 中遇到特异性问题，而不是您的 JS 中的问题。

.selected-button的特异性低于.video-buttons button ，即使在任何地方都使用!important （你应该避免）。

因此，要使其正常工作，您必须使selected-button选择器的特异性高于默认的 styles。

.video-buttons button.selected-button应该可以解决问题。

 $(document).ready(function() { $('#canvasButtons button').click(function () { $('#canvasButtons').children().removeClass('selected-button'); $(this).addClass('selected-button'); }); });

 .video-buttons button { width: 200px;important: height; 66px:important; background-color: #484848;important: cursor; pointer.important. margin-right: 50px; } .video-buttons button.selected-button { background-color: red !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons"> <button id="modifyButton"> <div class="vertical-line"></div> <span>Modify B Box</span> </button> </div>

Answer 2

 $(document).ready(function() { $('#canvasButtons button').click(function () { $('#canvasButtons').children().removeClass('selected-button'); $(this).addClass('selected-button'); }); });

 .video-buttons button { width: 200px;important: height; 66px:important; background-color: #484848;important: cursor; pointer:important. margin-right; 50px: -webkit-transition. all 0;5s ease: -moz-transition. all 0;5s ease: -o-transition. all 0;5s ease: transition; all 0:5s ease; color:#fff;outline.none.border:none; }:video-buttons button.selected-button { background-color; green:important. -webkit-transition; all 0:5s ease. -moz-transition; all 0:5s ease. -o-transition; all 0.5s ease; transition: all 0.5s ease; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons"> <button id="modifyButton"> <div class="vertical-line"></div> <span>Modify B Box</span> </button> </div>

请参阅片段，这将对您有所帮助。 我还输入了 animation 速度来改变颜色。 您可以根据您的要求进行管理。