个人中心
gpt4 book ai didi

How do i apply a style to multiple li elements in js?(如何将样式应用于js中的多个li元素？)

转载 作者：bug小助手 更新时间：2023-10-28 10:56:34 27 4
gpt4 key购买 nike 



var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelector("li");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeydown(event) {
    if (inputLength() > 0 && event.key === "Enter") {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);
    
input.addEventListener("keydown", addListAfterKeydown);

li.addEventListener("click", function() {
    li.classList.add("done");
} )

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

It first worked when i just used "querySelector"(without all) but just for the first item. What can i change to apply the style line-through for all the li items that I click on?

当我只使用“querySelector”(没有全部)时，它第一次起作用，但只用于第一个项目。我可以更改什么来将样式划线应用于我所单击的所有li项？


I also tried to use the the querySelector on ul but nothing happens.

我还尝试在ul上使用querySelector，但没有任何反应。


更多回答

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.

请澄清您的具体问题或提供更多详细信息，以突出您的确切需求。按照目前的写法，很难准确地说出你在问什么。

优秀答案推荐

The dynamically added li item doesn't have a click event attached to it. You manually add the click event handler to each you create, but I would use event delegation. The idea is simple, you add one click event handler to the parent (ul in this case), and whenever the parent or it's children are click, you check if which specific child was clicked, and act if one is found.

动态添加的li项没有附加click事件。您可以手动将click事件处理程序添加到您创建的每个li项中，但我会使用事件委托。这个想法很简单，你添加一个点击事件处理程序到父（在这个例子中是ul），每当父或它的孩子被点击时，你检查哪个特定的孩子被点击了，如果找到一个就采取行动。


Attach the event handler to the ul, when an item is clicked, get the closest li from e.target, and if the or it's parents are a li item, add the class to the li item:

将事件处理程序附加到ul，当单击一个项时，从e.Target获取最接近的li，如果或它的父项是li项，则将类添加到li项：




var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeydown(event) {
  if (inputLength() > 0 && event.key === "Enter") {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keydown", addListAfterKeydown);

ul.addEventListener("click", function(e) {
  var el = e.target.closest('li');
  if(el) el.classList.add("done");
})

.done {
  text-decoration: line-through;
}

<input id="userinput">

<button id="enter">Add</button>

<ul></ul>




更多回答

27 4 0
文章推荐： How can I open an srt format in Flet File Picker?(如何在Flet文件拾取器中打开SRT格式？)
文章推荐： SpringMVC PUT request to edit data but instead, got a new one(SpringMVC发出了编辑数据的请求，但得到了一个新的请求)
文章推荐： Spring cloud function with as http end point with path variable(以路径变量作为Http终点的Spring Cloud函数)
文章推荐： Unity3d parsed Json file is printing Null values(Unity3D解析的Json文件正在打印空值)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com