Question

我的HTML代码：

<div class="mydiv" onclick="clickonelement()">div1</div>
<div class="mydiv" onclick="clickonelement()">div2</div>
<div class="mydiv" onclick="clickonelement()">div3</div>
<div class="mydiv" onclick="clickonelement()">div4</div>
<div class="mydiv" onclick="clickonelement()">div5</div>
<div class="mydiv" onclick="clickonelement()">div6</div>
<!-- javascript code -->
function clickonelement(){
mydiv = document.getElementsByClassName("mydiv");
for(i=0; i<mydiv.length; i++){
mydiv.item(i).style.backgroundColor = "red";
mydiv[this].style.backgroundColor = "#fff";
}
}
css code
.mydiv{width:300px; height:30px;}

我希望在onClick事件上将点击元素的背景更改为白色，其他元素背景颜色保持红色但我的代码 mydiv [this] .style.backgroundColor =“＃fff”; 不管用。请仅在JavaScript中解决此问题。我处于JavaScript的基本阶段。

Answer 1

您需要使用this传递对您要引用的元素的引用，例如onclick="clickonelement(this)"：

function clickonelement(elem) {
  mydiv = document.getElementsByClassName("mydiv");
  for (i = 0; i < mydiv.length; i++) {
    mydiv.item(i).style.backgroundColor = "red";
    elem.style.backgroundColor = "#fff";
  }
}

<div class="mydiv" onclick="clickonelement(this)">div1</div>
<div class="mydiv" onclick="clickonelement(this)">div2</div>
<div class="mydiv" onclick="clickonelement(this)">div3</div>
<div class="mydiv" onclick="clickonelement(this)">div4</div>
<div class="mydiv" onclick="clickonelement(this)">div5</div>
<div class="mydiv" onclick="clickonelement(this)">div6</div>

Answer 2

这是HTML代码的JS代码，您需要添加addEventListener。

function clickonelement() {
  mydiv = document.getElementsByClassName("mydiv");

  for (var i = 0; i < mydiv.length; i++) {
    mydiv[i].addEventListener('click', function() {
      this.style.backgroundColor = "red";
      this.style.backgroundColor = "#fff";
    });
  }
}

Answer 3

这是实现相同功能的另一种方式。

目标

删除内联事件处理程序
仅使用循环一次，而不是在每次点击时循环遍历所有匹配的类名（mydiv）。

使用过的javascript函数＆amp;概念

querySelectorAll： - 用于选择具有相同类mydiv的所有匹配元素。它将返回包含所有匹配元素的节点列表
forEach： - 是一个用于遍历list的数组方法。它接受三个参数。对于这种情况，两个就足够了。
addEventListener： - 用于将事件附加到元素
Closures：这些功能记得＆＃39;它们的创建环境。

希望此代码段有用

//Get all the matched Elements
var matches = document.querySelectorAll("div.mydiv");
//Use an variable to rememeber previous clicked element
var prevIndex = -1; // 
// Loop over the list
matches.forEach(function(item,index){
 (function(i){ //  A closure is created
    item.addEventListener('click',function(){
       // if any previous element was clicked then rest it's background
        if(prevIndex !== -1){
         matches[prevIndex].style.background="red";
        }
        // change background of current element
        item.style.background="#fff";
        // update prevIndex
        prevIndex = i;  
     })
    }(index))

})

选中此DEMO

通过javascript更改数组中单击元素的样式

3 个答案: