更改背景 <li> 分子

Question

我是javascript新手。 我想更改背景

單擊時從白色到紅色的元素。 單擊另一個后

元素想要將此元素轉換為紅色，其余元素更改為白色。 我成功但是最后

沒有受到影響。

 function func(li) { var x = document.querySelectorAll("li"); var i; for (i = 0; i < x.length; i++) { if (x[i].style.backgroundColor == "red") { x[i].style.backgroundColor = "white"; console.log('W'); } else { li.style.backgroundColor = "red"; console.log('W'); } } } 

 <ul> <li class="reng" onclick="func(this)">birinci</li> <li class="reng" onclick="func(this)">ikinci</li> <li class="reng" onclick="func(this)">ucuncu</li> <li class="reng" onclick="func(this)">dorduncu</li> </ul> 

Answer 1

試試這個版本

1. 使用事件監聽器
2. 聆聽UL而不是每個LI的任何點擊
3. 不打擾（不使用內聯事件處理程序）

 window.addEventListener("load", function() { // on page load document.querySelector("ul").addEventListener("click",function(e) { // click the UL var clickedObject = e.target; if (clickedObject.tagName == "LI") { // was it an LI document.querySelectorAll(".reng").forEach(function(li) { // reset all li.style.backgroundColor = "white"; }); clickedObject.style.backgroundColor = "red"; // color the clicked LI } }) }) 

 <ul> <li class="reng">birinci</li> <li class="reng">ikinci</li> <li class="reng">ucuncu</li> <li class="reng">dorduncu</li> </ul> 

如果要切換單擊的LI：

 window.addEventListener("load", function() { // on page load document.querySelector("ul").addEventListener("click",function(e) { // click the UL var clickedObject = e.target; if (clickedObject.tagName == "LI") { // was it an LI var col = clickedObject.style.backgroundColor; document.querySelectorAll(".reng").forEach(function(li) { // reset all li.style.backgroundColor = "white"; }); clickedObject.style.backgroundColor = col == "red" ? "white" : "red"; // toggle the clicked LI } }) }) 

 <ul> <li class="reng">birinci</li> <li class="reng">ikinci</li> <li class="reng">ucuncu</li> <li class="reng">dorduncu</li> </ul> 

Answer 2

我將簡單地執行此操作，無需進行條件檢查，只需從所有li中刪除紅色背景並將紅色背景放在單擊li對象上即可。

 function func(li){ var x = document.querySelectorAll("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "white"; } li.style.backgroundColor = "red"; } 

 <ul> <li class="reng" onclick="func(this)">birinci</li> <li class="reng" onclick="func(this)">ikinci</li> <li class="reng" onclick="func(this)">ucuncu</li> <li class="reng" onclick="func(this)">dorduncu</li> </ul> 

Answer 3

使用querySelectorAll將所有li變成白色，然后將單擊的一個變成紅色

 function func(li) { var a = document.querySelectorAll('li'); a.forEach((e) => e.style.backgroundColor = "white") li.style.backgroundColor = "red"; } 

 <ul> <li class="reng" onclick="func(this)">birinci</li> <li class="reng" onclick="func(this)">ikinci</li> <li class="reng" onclick="func(this)">ucuncu</li> <li class="reng" onclick="func(this)">dorduncu</li> </ul> 

Answer 4

 function func(li) { var x = document.querySelectorAll("li"); var i; for (i = 0; i < x.length; i++) { if (x[i].style.backgroundColor == "red") { x[i].style.backgroundColor = "white"; } } li.style.backgroundColor = "red"; } 

 <ul> <li class="reng" onclick="func(this)">birinci</li> <li class="reng" onclick="func(this)">ikinci</li> <li class="reng" onclick="func(this)">ucuncu</li> <li class="reng" onclick="func(this)">dorduncu</li> </ul> 

我剛剛更改了您的代碼。 現在正在工作。

Answer 5

該代碼編寫不正確。

var x = document.querySelectorAll("li");
  var i;
// we iterate over all LI elements
  for (i = 0; i < x.length; i++) {
      if(x[i].style.backgroundColor == "red"){
      x[i].style.backgroundColor = "white";
      console.log('W');
      }
// if given by index LI element backgroundColor is not "red" 
// then LI clicked element backgroundColor is set to "red"
// so at first if you click on ANY (including LAST) element 
// from list the LAST element property is at first set to "red" 
// - which is not visible because in next 
// for(..) iteration this LAST element is set to 'white' !!!
// etc etc
     else {
        li.style.backgroundColor = "red";
        console.log('W');
}