jQuery 删除按钮点击之前应用的 css 样式

Question

如果我点击另一个按钮，如何删除之前应用在点击按钮上的 background-color？使用此代码，它会根据需要应用单击按钮的悬停背景颜色，但如果我单击另一个按钮，则无法 reset/remove 应用的样式。

$("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>

Answer 1

你做错了，你不能依靠悬停颜色来设置活动颜色。如果我使用键盘导航按钮并使用 Enter 单击它们，则不会应用 background-color。

更好的解决方案是添加 active class 和 jQuery，然后在激活时使用 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>

Answer 2

您可以使用纯 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>

Answer 3

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>

jQuery 删除按钮点击之前应用的 css 样式

jQuery remove previously applied css style on button click

html

javascript

css

jquery