改变多个按钮的颜色

Question

我有一组按钮，按下时应改变颜色。 我用getelementybyclassname尝试了它但是当我按下一个不同的按钮时，所有按钮的颜色都会改变。我的目标是制作某种选择器，您可以在其中选择标准，并根据标准显示最终结果

function changecolor(){
  var elements = document.getElementsByClassName("button")[0].style.color="blue";
  }

<h2><span class="primary-text">Choose </span>your criteria</h2>
          <button class="button"type="button" id="lightframe" onclick="changecolor()">easy to handle</button>
          <button class="button"type="button" id="outdoor" onclick="changecolor()">small</button>
          <button class="button"type="button" id="smallsize" onclick="changecolor">cheap</button>

Answer 1

试试这个：

＆＃13;

＆＃13;

function changecolor(idElement){
  var elements = document.getElementById(idElement).style.color="blue";
  }

＆＃13;

<h2><span class="primary-text">Choose </span>your criteria</h2>
          <button class="button"type="button" id="lightframe" onclick="changecolor('lightframe')">easy to handle</button>
          <button class="button"type="button" id="outdoor" onclick="changecolor('outdoor')">small</button>
          <button class="button"type="button" id="smallsize" onclick="changecolor('smallsize')">cheap</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该尝试jQuery

<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button class="button" type="button" id="lightframe">easy to handle</button>
      <button class="button" type="button" id="outdoor">small</button>
      <button class="button" type="button" id="smallsize">cheap</button>



//This code will only change the one that is selected

    $('.button').click(function() {
      $(this).css("color", "blue");
    });

Answer 3

您只需将按钮传递给功能

即可

function changecolor(button){
  button.style.color = "blue";
  }

<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" onclick="changecolor(this)">easy to handle</button>
      <button type="button" onclick="changecolor(this)">small</button>
      <button type="button" onclick="changecolor(this)">cheap</button>

或者像这样

function changecolor(){
  this.style.color = "blue";
  }

<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" onclick="changecolor.apply(this)">easy to handle</button>
      <button type="button" onclick="changecolor.apply(this)">small</button>
      <button type="button" onclick="changecolor.apply(this)">cheap</button>

修改

如果你想触发按钮的颜色，我强烈建议使用css而不是操作style属性。 jQuery对于这个

非常方便

$(".button").on("click", function () {
	if($(this).hasClass("active")) {
  	$(this).removeClass("active");
  }
  else {
  	$(this).addClass("active");
  }
});

.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" class="button">easy to handle</button>
      <button type="button" class="button">small</button>
      <button type="button" class="button">cheap</button>