jQuery remove previously applied css style on button click-CodePudding

How can I remove the previously applied background-color on the clicked button(s) if I click to another button? 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).

$("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 >Test</button>
<button >Test 1</button>
<button >Test 2</button>
<button >Test 3</button>
<button >Test 4</button>
</body>
</html>

CodePudding user response：

You're doing this the wrong way, you cannot rely on the hover color to set the active color. If I use the keyboard to navigate the buttons and click them using Enter, then the background-color is not applied.

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.

Try:

$("button").each(function(){
    var $this = $(this);
    $this.click(function(e) {
        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 >Test</button>
<button >Test 1</button>
<button >Test 2</button>
<button >Test 3</button>
<button >Test 4</button>
</body>
</html>

CodePudding user response：

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 >Test</button>
<button >Test 1</button>
<button >Test 2</button>
<button >Test 3</button>
<button >Test 4</button>
</body>
</html>

CodePudding user response：

You could do this with pure CSS, adding focus in addition to hover in your CSS to apply the color:

.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 >Test</button>
<button >Test 1</button>
<button >Test 2</button>
<button >Test 3</button>
<button >Test 4</button>
</body>
</html>