所有创建的li元素上的JavaScript - addEventListener [英] JavaScript - addEventListener on all created li elements

问题描述

因此，我有一个简单的脚本，将li元素添加到ul并为其分配一个类。现在我想在click事件中更改li类的类。

这是HTML：

 < form class =form> 
< input id =newInputtype =textplaceholder =Dodajpozycję> 
< button id =createNewtype =button> Dodaj< / button> 
< / form> 
< h2> Moja lista：< / h2> 
< div class =listBg> 
< ul id =list> 
< / ul> 
< / div> 
< button id =deleteAlltype =button>Wyczyść< / button> 
  

和JS：

  function addItem（）{
 var myList = document.getElementById（list）; //获取主列表（ul）
 var newListItem = document.createElement（li）; //创建一个新的li元素
 var itemText = document.getElementById（newInput）.value; //从#newInput 
读取输入值var listText = document.createTextNode（itemText）; //从输入
创建具有calue的文本节点newListItem.appendChild（listText）; //将文本节点添加到新的li元素
 if（itemText ===）{//如果输入calue为空
 alert（Pole niemożebyćpuste）; //显示此警报
} else {//如果它不是空的
 var x = document.createElement（span）; //创建一个新的span元素
 x.innerText =X; //将内部文本添加到span元素
 x.className =closer; //将类添加到span元素
 myList.appendChild（newListItem）; //将创建的li元素添加到ul
 newListItem.className =item; //将类添加到新的li元素
 newListItem.appendChild（x）; //添加一个span到新的li元素
 var itemText = document.getElementById（newInput）; //读取当前输入值
 itemText.value =; //将当前输入的calue设置为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非常陌生，所以我希望得到一些答案。

解决方案

使用事件委托来动态创建元素。有了这个，你只需要在 ul＃list 中添加一个事件监听器，它将适用于你动态附加到它的所有元素：

  document.getElementById（list）。addEventListener（click，function（e）{
 if（e.target&& e.target .matches（li.item））{
 e.target.className =foo; //这里有新的类名
} 
}）; 
  

下面是一个简化的示例，您可以看到代码会发生什么情况：

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; //这里有新的类名alert（clicked+ e.target.innerText）;}}）;

 < ul id =list> < li class =item> 1< / li>< / ul>< button id =btn>添加项目< / button>  




So I have a simple script that adds "li" elements to the "ul" and assigns them a class. Now I want to change the class of "li" item on click event.

Here is the 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>

And 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
    }
};

I was thinking something like this should do the trick, but it's not working:

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);

I'm fairly new to javascript so I would appreciate some explanation with the answer.

解决方案

Use event delegation for the dynamically created elements. With this, you only need one event listener on the ul#list and it will work for all elements you dynamically attach to it:

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

Here's a simplified example so you can see what happens with the code:

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>

这篇关于所有创建的li元素上的JavaScript - addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！