javascript - Java Script - 类名数组 - 对一个数组元素执行操作

Question

我有一个数组ClassName：

Starter = document.getElementsByClassName('buttonsColor');

和 3 个按钮：

<.button class="buttonsColor" type="button" 
 onclick="starterMenu()";>Starter</button>
 <.button class="buttonsColor" type="button" onclick="menuM()";>Main</button>
 <.button class="buttonsColor" type="button" 
onclick="menuDessert()";>Dessert</button>"

当我想改变这个数组中一个元素的颜色时，我必须转向它并将其索引设置为 0、1 或 2，例如在这种情况下。

我怎样才能做到这一点，以便当我点击三个按钮之一时，我会知道我点击了它，然后就可以执行更改颜色等操作？

也许用在addEventListener？

标签： javascript

Answer 1

我怎样才能做到这一点，以便当我单击三个按钮之一时，我会知道我单击了它，然后就可以执行更改颜色等操作。

下面是有关如何绑定单击事件处理程序以及如何与单击按钮的样式进行交互的示例。它应该让您开始允许您从那里扩展。

要按类选择按钮，您可以像显示的那样选择它们：

var buttons = document.getElementsByClassName('buttonsColor');

您现在可以遍历按钮并使用addEventListener附加单击事件处理程序，类似于：

for(var i = 0;i<buttons.length;i++){
  buttons[i].addEventListener('click', yourClickHandler);
}

如果您现在想要更改单击按钮的颜色，您可以通过向应用样式的按钮的classList添加一个类来实现，类似于：

var buttons = document.getElementsByClassName('buttonsColor');

var changeColor = function(){
  this.classList.add('active');
};

for(var i = 0;i<buttons.length;i++){
  buttons[i].addEventListener('click', changeColor);
}

.active{
  background-color: red;
}

<button class="buttonsColor" type="button">Starter</button>
<button class="buttonsColor" type="button">Main</button>
<button class="buttonsColor" type="button">Dessert</button>

如果您想切换颜色，您可以使用.classList.toggle(active)

var buttons = document.getElementsByClassName('buttonsColor');

var changeColor = function(){
  this.classList.toggle('active');
};

for(var i = 0;i<buttons.length;i++){
  buttons[i].addEventListener('click', changeColor);
}

.active{
  background-color: red;
}

<button class="buttonsColor" type="button">Starter</button>
<button class="buttonsColor" type="button">Main</button>
<button class="buttonsColor" type="button">Dessert</button>

如果您想使选择互斥，您可以通过从所有按钮中删除类来做到这一点，classList.remove(active)并仅将其分配给单击的按钮，再次使用classList.add(active)

var buttons = document.getElementsByClassName('buttonsColor');

var changeColor = function(){
  for(var i = 0;i<buttons.length;i++){
    buttons[i].classList.remove('active');
  }
  
  this.classList.add('active');
};

for(var i = 0;i<buttons.length;i++){
  buttons[i].addEventListener('click', changeColor);
}

.active{
  background-color: red;
}

<button class="buttonsColor" type="button">Starter</button>
<button class="buttonsColor" type="button">Main</button>
<button class="buttonsColor" type="button">Dessert</button>