通過javascript更改數組中單擊元素的樣式

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

這只是實現相同功能的另一種方法。

目的

1. 刪除內聯事件處理程序
2. 僅使用一次循環，而不是每次單擊時都遍歷所有匹配的類名（ mydiv ）。

使用的javascript函數和概念

1. querySelectorAll ：-用於選擇所有相同類為mydiv匹配元素。 它將返回一個包含所有匹配元素的節點列表

2. forEach ：-是用於遍歷列表的數組方法，它接受三個參數。 對於這種情況，兩個就足夠了。

3. addEventListener ：-用於將事件附加到元素

4. 閉包 ：這些函數“記住”創建它們的環境。

希望此片段有用

//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))

})

檢查這個演示