如果我单击列表项，它会打开和关闭 .done class

Question

我想要一个事件，它能穿透我 li

上的文字

我的HTML

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>

我的CSS

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

我的JS

 var list = document.getElementsByTagName("li");
 list.addEventListener("click", function(e){
 list.classList.toggle("done");
 })

我试过：

var list = document.querySelector("li");

显然只能得到第一个li，所以我试了 querySelectorAll 它不工作它告诉我错误：

Uncaught TypeError: Cannot read property 'toggle' of undefined"

Answer 1

我使用 document.querySelectorAll 到 select 所有 li 标签。

然后遍历 DOM 个对象的集合并将事件附加到每个对象。您会注意到我正在使用 click 事件侦听器中的事件来打开 class done。

希望对您有所帮助

var list = document.querySelectorAll("li");
for(var i = 0; i < list.length; i++) {
   list[i].addEventListener("click", function(e){
    e.currentTarget.classList.toggle("done");
   })
 }

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

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>

Answer 2

您需要将 click 侦听器附加到您从 document.getElementsByTagName("li"); 获得的所有 li 元素，作为 getElementsByTagName() returns 您的元素列表使用该标签，您需要将侦听器单独分配给代码中缺少的每个标签，因此出现错误。

var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
 list[i].addEventListener("click", liClick);
}
function liClick(){
  this.classList.toggle("done");
}

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

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>

Answer 3

与其向每个 <li> 元素添加一个事件，不如向 <ul> 元素添加一个事件来监视您点击的内容，这将在您将新的待办事项添加到列表中时提供更多帮助

var ul = document.querySelector("ul");
ul.addEventListener("click", function(e){
  evt.target.classList.toggle("done");
})

但是在这里你还需要注意你点击的是哪个元素。您可能只是点击了 ul，或者 li 元素内部更深的元素

Answer 4

Javascript 代码如下：

var list = document.querySelectorAll("li");

for(var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", liClick); 
}

//function to add the 'line through' style
function liClick() {
    this.classList.toggle("done");
}

CSS 代码如下：

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

Html 代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylejs.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get is done today</p>
    <input id="userinput" type="text" placeholder="enter to-do">

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

    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="learndom.js"></script>
</body>
</html>

Answer 5

我知道您找到了答案，但让我向您展示一种更简洁的方法：

function toggleClassDoneOnAndOff(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}
ul.addEventListener("click", toggleClassDoneOnAndOff);

希望你喜欢:)

如果我单击列表项，它会打开和关闭 .done class

If I click on the list item, it toggles the .done class on and off

javascript

event-handling

jquery-selectors

dom-events