jquery - 更改多个按钮颜色的更好方法

Question

我使用 jQuery 根据单击事件更改按钮的颜色。该代码可以工作并且“易于”阅读，但我想相当糟糕，当我稍后将有 20 个以上也可以操作 HTML 的按钮时。

function R1() {
    $("#R1").css("background-color", "red")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }

function R2() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "red")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }

function R3() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "red")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }
function R4() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "red")
  $("#R5").css("background-color", "green")
  }

function R5() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "red")
  }


document.getElementById("R1").addEventListener("click", R1)
document.getElementById("R2").addEventListener("click", R2)
document.getElementById("R3").addEventListener("click", R3)
document.getElementById("R4").addEventListener("click", R4)
document.getElementById("R5").addEventListener("click", R5)

你能帮我以良好的编程风格编写它吗？

Answer 1

当您使用 JQuery 时，您只需附加 click按钮事件，当单击时更改 background-color至red对于此按钮并设置 background-color除此以外的其他按钮，为 green

$(document).ready(function(){
  $('button').click(function(){
    $(this).css("background", "red").siblings().css("background", "green");
  });
});

button {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='R1'>Click R1</button>
<button id='R2'>Click R2</button>
<button id='R3'>Click R3</button>
<button id='R4'>Click R4</button>
<button id='R5'>Click R5</button>