我正在尝试创建动态div元素，并在这些div元素上添加单击事件。 我用for循环创建它们。 但事件处理程序只为for循环创建的最后一个元素工作。 下面是我的完整代码。
null
function givealert(count) {
if (count != 0) {
createDiv();
}
}
function createDiv(numberOfDiv) {
var navitemlabels = ['Home', 'Products', 'Services', 'About'];
var i;
for (i = 0; i < navitemlabels.length; i++) {
var newitem = document.createElement('div');
var itemid = "div" + i;
newitem.id = "div" + i;
newitem.className = "navdivs square";
newitem.innerHTML = navitemlabels[i];
newitem.addEventListener("click", function() {
if (newitem.classList.contains('selected') || newitem.classList.contains('square')) {
var x = document.getElementsByClassName("selected");
//alert(x[0])
if (x.length == 0) {
toggleColor(newitem);
} else if (newitem == x[0]) {
toggleColor(newitem);
} else {
toggleColor(newitem, x[0]);
}
}
})
document.getElementById("navbar").appendChild(newitem);
}
}
function toggleColor(selecteddiv, lastSelected) {
if (!lastSelected) {
selecteddiv.classList.toggle("square");
selecteddiv.classList.toggle("selected");
} else {
selecteddiv.classList.toggle("square");
selecteddiv.classList.toggle("selected");
lastSelected.classList.toggle("square");
lastSelected.classList.toggle("selected");
}
}.selected {
background-color: rgb(255, 255, 255);
}
.square:hover {
background-color: rgb(255, 255, 255);
}
.navdivs {
width: 100px;
height: 20px;
border: 1px solid rgb(255, 255, 255);
display: inline-block;
text-align: center;
cursor: pointer;
}
.square {
background-color: rgb(69, 205, 233);
}<body onload="givealert(4)">
<div id="navbar"></div>
</body>null
当我运行这个文件时，有4个div元素被创建，但是只有最后一个元素具有工作的click事件函数。 当单击时，最后一个元素将保持单击状态，但对于其他div元素则不会发生这种情况。
对于一个简单的切换来说，您的if elses系列看起来非常复杂。 下面我修改了您的addEventListener，只需调用toggleColor。 一旦进入切换颜色，您就知道单击了这个=元素。 之后，您可以使用querySelector抓取所选元素并切换其类。
null
function givealert(count){
if(count != 0){
createDiv();
}
}
function createDiv(numberOfDiv){
var navitemlabels = ['Home', 'Products', 'Services', 'About'];
var i;
for(i=0; i<navitemlabels.length; i++)
{
var newitem = document.createElement('div');
var itemid = "div"+i;
newitem.id = "div"+i;
newitem.className = "navdivs square";
newitem.innerHTML = navitemlabels[i];
newitem.addEventListener("click", toggleColor);
document.getElementById("navbar").appendChild(newitem);
}
}
function toggleColor() {
const selected = document.querySelector('.selected');
if (selected) {
selected.classList.toggle("square");
selected.classList.toggle("selected");
}
this.classList.toggle("square");
this.classList.toggle("selected");
}.selected{
background-color: rgb(255, 255, 255);
}
.square:hover {
background-color: rgb(255, 255, 255);
}
.navdivs{
width: 100px;
height: 20px;
border: 1px solid rgb(255, 255, 255);
display:inline-block;
text-align: center;
cursor: pointer;
}
.square{
background-color: rgb(69, 205, 233);
}<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="navbar.css">
</head>
<body onload="givealert(4)">
<div id="navbar"></div>
</body>
</html>
您需要在单击处理程序中使用this而不是newitem
null
function givealert(count) {
if (count != 0) {
createDiv();
}
}
function createDiv(numberOfDiv) {
var navitemlabels = ['Home', 'Products', 'Services', 'About'];
var i;
for (i = 0; i < navitemlabels.length; i++) {
var newitem = document.createElement('div');
var itemid = "div" + i;
newitem.id = "div" + i;
newitem.className = "navdivs square";
newitem.innerHTML = navitemlabels[i];
newitem.addEventListener("click", function(e) {
if (this.classList.contains('selected') || this.classList.contains('square')) {
var x = document.getElementsByClassName("selected");
//alert(x[0])
if (x.length == 0) {
toggleColor(this);
} else if (this == x[0]) {
toggleColor(this);
} else {
toggleColor(this, x[0]);
}
}
})
document.getElementById("navbar").appendChild(newitem);
}
}
function toggleColor(selecteddiv, lastSelected) {
if (!lastSelected) {
selecteddiv.classList.toggle("square");
selecteddiv.classList.toggle("selected");
} else {
selecteddiv.classList.toggle("square");
selecteddiv.classList.toggle("selected");
lastSelected.classList.toggle("square");
lastSelected.classList.toggle("selected");
}
}.selected {
background-color: rgb(255, 255, 255);
}
.square:hover {
background-color: rgb(255, 255, 255);
}
.navdivs {
width: 100px;
height: 20px;
border: 1px solid rgb(255, 255, 255);
display: inline-block;
text-align: center;
cursor: pointer;
}
.square {
background-color: rgb(69, 205, 233);
}<body onload="givealert(4)">
<div id="navbar"></div>
</body>