Question

如果我只有一个按钮，就可以通过这种方式改变颜色，

<script>
var count = 1;
function setColor(btn, color) {
    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}

但如果我有多个按钮和多种颜色（例如：10个按钮，可能有3种颜色），如何做到这一点

Answer 1

var count = 1;
function setColor(btn, color) {
    var btns = document.getElementByClass("button_class_name");
    for(var i = 0; i < btns.length; i++) {
          btns.item(i).style.backgroundColor = "#7FFF00"
    }
}

这会将所有带有“button_class_name”类的按钮设置为“7FFF00”。

Answer 2

假设您有十个buttons，为所有按钮提供一个公共类。将事件绑定到每个按钮，如下所示。

＆＃13;

 var classname = document.getElementsByClassName("btns");
    var count =1;
    var setColor = function() {
        var button = this;
        if (count == 0) {
            button.style.backgroundColor = this.getAttribute("data-color");
            console.log(this.getAttribute("data-color"))
            count = 1;        
        }
        else {
            button.style.backgroundColor = this.getAttribute("data-color");
             console.log(this.getAttribute("data-color"))
            count = 0;
        }
    };

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', setColor, false);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="button" id="btn1" data-color="#7FFF00" value="btn1" class="btns">
    <input type="button" id="btn2" data-color="#7FFF00" value="btn2" class="btns">
    <input type="button" id="btn3" data-color="#FC0" value="btn3" class="btns">
    <input type="button" id="btn4" data-color="#FFFPPP" value="btn4" class="btns">
    <input type="button" id="btn5" data-color="#FC0" value="btn5" class="btns">
    <input type="button" id="btn6" data-color="#7FFF00" value="btn6" class="btns">
    <input type="button" id="btn7" data-color="#7FFF00" value="btn7" class="btns">
    <input type="button" id="btn8" data-color="#FC0" value="btn8" class="btns">
    <input type="button" id="btn9" data-color="#FFFPPP" value="btn9" class="btns">
    <input type="button" id="btn10" data-color="#FC0" value="btn10" class="btns">

＆＃13;

如果你想让它们中的每一个都有不同的颜色，你可以将数据属性放到按钮data-color='#FC0'中，并动态分配这种颜色。如果您有 ES6支持 ，则可以将最后一行替换为：

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', setColor);
});

Answer 3

尝试这样。Toggle为所有Button设置三个color's。创建颜色数组。然后用每个按钮元素click's计算data-count的数量。然后使用count

将this.dataset.count%col.length与颜色数组匹配

var count = 1;
document.querySelectorAll('button').forEach(function(a){
a.addEventListener('click', setColor)
})

var col = ["#FFFFFF","#AAAAAA","#6A76A7"];
function setColor() {
this.dataset.count= this.dataset.count >= 0 ? ++this.dataset.count : 0;
   this.style.backgroundColor = col[this.dataset.count%col.length] 
}

<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>
<button>one</button><br>

Answer 4

也许你正在寻找类似的东西。

<强> HMTL

<button class="buttons" id="btn-1">Button1</button>
<button class="buttons" id="btn-2">Button2</button>
<button class="buttons" id="btn-3">Button3</button>
<button class="buttons" id="btn-4">Button4</button>
<button class="buttons" id="btn-5">Button5</button>

<强> CSS

.buttons {
  border: none;
  background: transparent;

  padding: 10px 20px;
}

<强> JS

// Change one button color
function setButtonColor(btn, color) {
  btn.css({'background': color});
}

// Change a set of buttons color
function setButtonsColor(btns, colors) {
  $.each(btns, function (key, value) {
    setButtonColor($(value), colors);
  });
}

$(function(){

  setButtonsColor( $('.buttons'), 'gold')

  setButtonColor( $('#btn-1'), 'red' );
  setButtonColor( $('#btn-3'), 'purple' );

   $('.buttons').click(function(){
     setButtonColor( $(this), 'lightgreen' );
   });

});

Answer 5

使用基于对象的方法。这样可以在以后轻松扩展功能。

我对这些问题的理解是每个按钮都会循环显示每种颜色，具体取决于按钮被点击的次数。

例如，1次点击=红色，2次点击=绿色...

// Only 3 colours and buttons for a test.
// This list of colours
var cList = ['#f00','#0f0','#00f'];
// The butExtend object will become an array here
var butList = [];

// This object keeps track of the number of button clicks.
var ButExtend = function butObj(id) {
  this.count = 0;
  if (document.getElementById(id)) {
    document.getElementById(id).addEventListener('click',bClick,false);
  }
};

// Called on a button click
function bClick() {
  this.style.backgroundColor = cList[butList[this.id].count];
  butList[this.id].count++;
  if (butList[this.id].count >= cList.length) {
    butList[this.id].count = 0;
  }
}

window.onload = function() {
  // The list of id's for the buttons.
  var bId = ['b1','b2','b3'];
  for(x in bId) {
    butList[bId[x]] = new ButExtend(bId[x]);
  }
}

<button id="b1">but 1</button>
<button id="b2">but 2</button>
<button id="b3">but 3</button>

如果我有多个按钮，如何更改按钮颜色onClick

5 个答案: