Question

我使用jQuery根据点击事件更改按钮的颜色。代码有效，并且很容易＆＃34;阅读，但我觉得非常可怕，当我后来有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并设置{{1其他按钮，除此之外，还有background-color

＆＃13;

green

＆＃13;

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

＆＃13;

button {
  background: green;
}

＆＃13;

Answer 2

你可以创建一个以选择器和颜色作为参数的函数。

function changeColor(selector, color) {
  $(selector).css('background-color', color);
}

并将其称为：

changeColor('button', 'blue');

或

changeColor('button', '#0000FF');

在点击事件中，您可以将每个按钮的颜色设置为红色，然后将单击按钮的颜色设置为其他颜色。你甚至不需要一个函数，你可以直接使用jQuery。

Answer 3

您可以将单击事件附加到所有元素，并根据点击的元素上下文（this）在点击事件中设置绿色/红色：

var $ugSeriesDom = $('[id^=R]');
$ugSeriesDom.click(function(){
  $ugSeriesDom.css("background-color", "green");
  $(this).css("background-color", "red");
});

<强> Working Demo

Answer 4

为所有按钮指定相同的类属性，例如在HTML类=＆＃34; myButtons＆＃34;中，然后您可以编写一个函数，该函数获取您想要更改颜色的按钮的索引值：

//Pass in the index of the button who's color needs changed and the color to change it to
function ChangeButtonColor(index, color){
    //Grab all buttons with JQuery selector
    const buttons = $('.myButtons');
    //Change the color of the button at said index to color passed
    $($(buttons)[index]).css('background-color', color);
}

Answer 5

干净的方法是使用CSS类，而不是直接设置css。这样，您可以轻松更改比仅有一个更多的CSS属性（例如，更改边框。

因此，您可以在css文件中定义类似的内容：

button {
  background-color: green;
  border: solid 1px black;
}

.selected {
  background-color: red;
  border: solid 1px yellow;
}

然后使用javascript将该类添加到单击的按钮，并将其删除给其他人。

  $(document).ready(function(){
    $('button').click(function(){
      $('button').removeClass('selected');
      $(this).addClass('selected');
    });
  });

更好的方式来改变多个按钮的颜色

5 个答案: