選擇后返回默認語句？

Question

我有4個按鈕，當用戶單擊它們時，我正在更改其背景顏色。 單擊一個按鈕后，我希望其他按鈕恢復為其原始背景色（黑色）。 我已經將它用於第一個選擇，但此后不起作用。

每次單擊按鈕時，如何恢復按鈕的默認顏色？

if (data4 == a) {
    $(".button1").css('background-color', '#2EFE2E');
} else if (data4 == b) {
    $(".button2").css('background-color', '#088A08');
} else if (data4 == c) {
    $(".button3").css('background-color', '#088A08');
} else if (data4 == d) {
    $(".button4").css('background-color', '#088A08');
} else {
    $(".button1, .button2, .button3, .button4").css('background-color', 'black');
}

Answer 1

在將新顏色應用到所選按鈕之前，將它們全部恢復為默認顏色

$(".button1, .button2, .button3, .button4").css('background-color', 'black');
if (data4==a) {
  $(".button1").css('background-color', '#2EFE2E');
}else if(data4==b){
    $(".button2").css('background-color', '#088A08');
}else if(data4==c){
    $(".button3").css('background-color', '#088A08');
}else if(data4==d){
    $(".button4").css('background-color', '#088A08');
}

Answer 2

單擊新按鈕時，永遠不會調用您的重置，因為它位於“其他”部分。 我會這樣做（尚未測試）：

$(".button1, .button2, .button3, .button4").css('background-color', 'black');
if (data4==a) {
  $(".button1").css('background-color', '#2EFE2E');
}else if(data4==b){
    $(".button2").css('background-color', '#088A08');
}else if(data4==c){
    $(".button3").css('background-color', '#088A08');
}else if(data4==d){
    $(".button4").css('background-color', '#088A08');
}