gpt4 book ai didi

JavaScript - 在所有创建的 li 元素上添加事件监听器

转载 作者:搜寻专家 更新时间:2023-10-31 21:57:31 24 4
gpt4 key购买 nike

所以我有一个简单的脚本,可以将“li”元素添加到“ul”并为它们分配一个类。现在我想在点击事件中更改“li”元素的类。

这是 HTML:

<form class="form">
<input id="newInput" type="text" placeholder="Dodaj pozycję">
<button id="createNew" type="button">Dodaj</button>
</form>
<h2>Moja lista:</h2>
<div class="listBg">
<ul id="list">
</ul>
</div>
<button id="deleteAll" type="button">Wyczyść</button>

和 JS:

function addItem() {
var myList = document.getElementById("list"); // get the main list ("ul")
var newListItem = document.createElement("li"); //create a new "li" element
var itemText = document.getElementById("newInput").value; //read the input value from #newInput
var listText = document.createTextNode(itemText); //create text node with calue from input
newListItem.appendChild(listText); //add text node to new "li" element
if (itemText === "") { // if input calue is empty
alert("Pole nie może być puste"); // show this alert
} else { // if it's not empty
var x = document.createElement("span"); // create a new "span" element
x.innerText = "X"; // add inner text to "span" element
x.className = "closer"; // add class to "span" element
myList.appendChild(newListItem); // add created "li" element to "ul"
newListItem.className = "item"; // add class to new "li" element
newListItem.appendChild(x); // add a "span" to new "li" element
var itemText = document.getElementById("newInput"); // read current input value
itemText.value = ""; // set current input calue to null
}
};

我在想这样的事情应该可以解决问题,但它不起作用:

function itemDone() {
var listItems = document.querySelectorAll("li");
var i;
for (i = 0; i < listItems.length; i++) {
listItem[i].className = "itemDone";
};
};

var item = document.getElementsByClassName("item");
item.addEventListener("click", itemDone);

我是 javascript 的新手,所以我希望得到一些解释和答案。

最佳答案

对动态创建的元素使用事件委托(delegate)。有了这个,您只需要在 ul#list 上有一个事件监听器,它将适用于您动态附加到它的所有元素:

document.getElementById("list").addEventListener("click",function(e) {
if (e.target && e.target.matches("li.item")) {
e.target.className = "foo"; // new class name here
}
});

这是一个简化的示例,因此您可以看到代码发生了什么:

function addItem(i) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(i));
li.className = 'item';
document.getElementById('list').appendChild(li);
}

var counter = 2;
document.getElementById('btn').addEventListener('click', function() {
addItem(counter++);
});

document.getElementById("list").addEventListener("click", function(e) {
if (e.target && e.target.matches("li.item")) {
e.target.className = "foo"; // new class name here
alert("clicked " + e.target.innerText);
}
});
<ul id="list">
<li class="item">1</li>
</ul>

<button id="btn">
add item
</button>

关于JavaScript - 在所有创建的 li 元素上添加事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42111854/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com