Question

我正在尝试将带有JavaScript的onclick事件应用于以下元素：

<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>

如果我点击第一个元素（使用索引[0]），那么这可行，但是我需要此事件适用于所有类：

document.getElementsByClassName('abc')[0].onclick="function(){fun1();}";
function  fun1(){
document.getElementsByClassName('abc').style.color="red"; 
}

Answer 1

.onclick不希望收到字符串，事实上你根本不需要额外的功能。

但是，要将它分配给每个元素，请使用循环，就像我确定您必须在初学者教程中学到的那样。

var els = document.getElementsByClassName('abc');
for (var i = 0; i < els.length; i++) {
  els[i].onclick = fun1;
}

function fun1() {
  this.style.color = "red";
}

<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>

Answer 2

为了扩展@rock star提供的解决方案，我在函数中添加了两个小的补充。首先，最好将一个类（带有关联的样式规则）添加/重新移动到元素，而不是直接将样式器应用于元素。

其次 - 在click事件上 - 现在将从先前选择的元素中删除红色类（因此样式）并将其添加到新元素。这将允许一次只有一个元素为红色（在原始解决方案中，任何被点击的元素都将变为红色）。

var els = document.getElementsByClassName('abc');
for (var i = 0; i < els.length; i++) {
  els[i].onclick = fun1;
}

function fun1() {
  var oldLink = document.getElementsByClassName('red')[0];
  if(oldLink) {oldLink.classList.remove('red')};
  this.classList.add('red');
}

.red {
 color:red;
}

<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>

Answer 3

这有效：

＆＃13;

<body>
<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>
<script>
var elements = document.getElementsByClassName('abc');

for(var i = 0, max = elements.length; i < max; i += 1) {
  var clickedElement = elements[i];
  clickedElement.onclick=function (){
    fun1(this);
  };
}

function  fun1(element){
  element.style.color="red"; 
}
</script>
</body>

＆＃13;

将事件侦听器绑定到具有相同类的多个元素

3 个答案: