[英]Change background of <li> elements
我是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>
试试这个版本
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>
我将简单地执行此操作,无需进行条件检查,只需从所有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>
使用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>
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>
我刚刚更改了您的代码。 现在正在工作。
该代码编写不正确。
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.