jQuery 刪除按鈕單擊之前應用的 css 樣式
[英]jQuery remove previously applied css style on button click
問題描述
如果單擊另一個按鈕，如何刪除先前在單擊的按鈕上應用的background-color ？ 使用此代碼，它會根據需要應用單擊按鈕的 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
你做錯了，你不能依賴 hover 顏色來設置活動顏色。 如果我使用鍵盤導航按鈕並使用Enter單擊它們，則不會應用背景色。
更好的解決方案是使用 jQuery 添加active的 class，然后在活動時使用 CSS 修改按鈕的顏色。
嘗試：
$("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
您可以使用純 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>
如何通過 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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.