更改<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');
}