jQuery 删除按钮单击之前应用的 css 样式
[英]jQuery remove previously applied css style on button click
问题描述
How can I remove the previously applied background-color on the clicked button(s) if I click to another button?
如果单击另一个按钮，如何删除先前在单击的按钮上应用的background-color ？ With this code, it's applying the clicked button's hover background color as I want it, but I can't reset/remove the applied styles if I click on the another button(s).使用此代码，它会根据需要应用单击按钮的 hover 背景色，但如果我单击另一个按钮，则无法重置/删除应用的 styles 。
$("button").each(function(){ var $this = $(this); $this.click(function(e) { e.preventDefault(); var color = $this.css('background-color'); $this.css({'background-color': color, 'color': '#ffffff'}); }) });
.btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; border-radius: 5px; }.success { border-color: #04AA6D; color: green; }.success:hover { background-color: #04AA6D; color: white; }.info { border-color: #2196F3; color: dodgerblue; }.info:hover { background: #2196F3; color: white; }.warning { border-color: #ff9800; color: orange; }.warning:hover { background: #ff9800; color: white; }.danger { border-color: #f44336; color: red; }.danger:hover { background: #f44336; color: white; }.default { border-color: #e7e7e7; color: black; }.default:hover { background: #e7e7e7; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <button class="btn success">Test</button> <button class="btn info">Test 1</button> <button class="btn warning">Test 2</button> <button class="btn danger">Test 3</button> <button class="btn default">Test 4</button> </body> </html>
3 个解决方案
解决方案1
1 2022-05-26 15:40:47
You're doing this the wrong way, you cannot rely on the hover color to set the active color.你做错了，你不能依赖 hover 颜色来设置活动颜色。 If I use the keyboard to navigate the buttons and click them using Enter , then the background-color is not applied.如果我使用键盘导航按钮并使用Enter单击它们，则不会应用背景色。
A better solution would be to add an active class with jQuery and then modify the color of the button using CSS when it's active.更好的解决方案是使用 jQuery 添加active的 class，然后在活动时使用 CSS 修改按钮的颜色。
Try:尝试：
$("button").each(function(){ var $this = $(this); $this.click(function(e) { // reset class of active buttons, if needed $("button.active").removeClass('active'); e.preventDefault(); $this.toggleClass('active') }) });
.btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; border-radius: 5px; }.success { border-color: #04AA6D; color: green; }.success:hover, .success.active { background-color: #04AA6D; color: white; }.info { border-color: #2196F3; color: dodgerblue; }.info:hover, .info.active { background: #2196F3; color: white; }.warning { border-color: #ff9800; color: orange; }.warning:hover, .warning.active { background: #ff9800; color: white; }.danger { border-color: #f44336; color: red; }.danger:hover, .danger.active { background: #f44336; color: white; }.default { border-color: #e7e7e7; color: black; }.default:hover, .default.active { background: #e7e7e7; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <button class="btn success">Test</button> <button class="btn info">Test 1</button> <button class="btn warning">Test 2</button> <button class="btn danger">Test 3</button> <button class="btn default">Test 4</button> </body> </html>
解决方案2
0 2022-05-26 15:46:18
You could do this with pure CSS, adding focus in addition to hover in your CSS to apply the color:您可以使用纯 CSS 来执行此操作，在 CSS 中添加除hover之外的focus以应用颜色：
.btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; border-radius: 5px; }.success { border-color: #04AA6D; color: green; }.success:hover, .success:focus { background-color: #04AA6D; color: white; }.info { border-color: #2196F3; color: dodgerblue; }.info:hover, .info:focus { background: #2196F3; color: white; }.warning { border-color: #ff9800; color: orange; }.warning:hover, .warning:focus { background: #ff9800; color: white; }.danger { border-color: #f44336; color: red; }.danger:hover, .danger:focus { background: #f44336; color: white; }.default { border-color: #e7e7e7; color: black; }.default:hover, .default:focus { background: #e7e7e7; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <button class="btn success">Test</button> <button class="btn info">Test 1</button> <button class="btn warning">Test 2</button> <button class="btn danger">Test 3</button> <button class="btn default">Test 4</button> </body> </html>
解决方案3
0 已采纳 2022-05-26 15:51:59
var lastColor = null; var lastBtn = null; $("button").each(function(){ var $this = $(this); $this.click(function(e) { e.preventDefault(); if (lastBtn.= null){ lastBtn:css({ 'background-color', '': 'color'; lastColor }); } lastBtn = $this. lastColor = $this;css('background-color'). var color = $this;css('background-color'). $this:css({'background-color', color: 'color'; '#ffffff'}); }) });
.btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; border-radius: 5px; }.success { border-color: #04AA6D; color: green; }.success:hover { background-color: #04AA6D; color: white; }.info { border-color: #2196F3; color: dodgerblue; }.info:hover { background: #2196F3; color: white; }.warning { border-color: #ff9800; color: orange; }.warning:hover { background: #ff9800; color: white; }.danger { border-color: #f44336; color: red; }.danger:hover { background: #f44336; color: white; }.default { border-color: #e7e7e7; color: black; }.default:hover { background: #e7e7e7; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <button class="btn success">Test</button> <button class="btn info">Test 1</button> <button class="btn warning">Test 2</button> <button class="btn danger">Test 3</button> <button class="btn default">Test 4</button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 javascript 中单击按钮时删除 css 样式？ - How to remove css style on button click in javascript?
CSS-jQuery移动样式未应用 - css - jquery mobile style not applied
删除由单击事件应用的 CSS - Remove CSS applied by a click event
如何通过 css 覆盖以前使用 javascript 应用的样式 - how to override the style, via css, previously applied with javascript
如何为按钮添加样式并删除先前单击的按钮的样式？ - How to add style to button and remove style of previously clicked button?
单击button1并将文本添加到div，单击button2并删除文本和CSS样式button1 - click on button1 and add text to div, click on button2 and remove text and css style button1
单击按钮时更改 CSS 样式？ - Change CSS style on button click?
如何删除之前创建的 css 样式 (id)？ - How do I remove a css style (id) that was previously created?
按钮和输入元素未应用 css 样式：背景 - Button and input elements doesn't get applied css style : background
单击按钮以使用js添加CSS样式 - Click button to add a css style with js
相关标签