Question

因此，我尝试列出项目，并在单击它们时将其切换为“完成”类。我试图不使用jQuery。

这是我到目前为止提出的：

当前，我的问题是我能够以li的形式将项目添加到列表中，但是只有其他所有项目都可以在点击时添加“完成”类别。

有人可以阐明为什么会这样吗？被弄糊涂了。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <h1>Shopping list</h1>
    <br> 
   <input id="userInput" placeholder="enter item" type="text">
   <button id="button">enter</button>
   <br>

    <ul class="list">
    </ul>

</body>
<script src="script.js"></script>
</html>

JS：

    var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");

// strikethrough task on click
function strike() {
    for(var i = 0; i < li.length; i++) 
    {
        li[i].addEventListener('click',function() {
            if(this.classList.contains("iteJm")) {
                this.classList.toggle("done");
            }
        }); 
    }
}

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

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    li.classList.add('item');
    input.value = '';
    strike();
}

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

function addToListAfterEnter(event) {
    if(inputLength() > 0 && event.keyCode == 13) {
        createListElement();

     }
}

button.addEventListener('click',addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);

以下是CSS：

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

Answer 1

您在z_stream中记下了额外的#include <iostream> #include <zlib.h> #include <cstdlib> int main() { z_stream strm; std::memset(&strm, 0, sizeof(z_stream)); deflateInit(&strm, Z_DEFAULT_COMPRESSION); std::cout << "it works!" << std::endl; }，而不是输入错误，而是将多次点击事件附加到了项目上，因此每次新this.classList.contains("iteJm")都添加了一个新事件将被附加到所有J上，这使click事件无法正常工作，我建议您在创建li时附加点击：

li

如果事件两次附加，则切换功能将添加和删除该类，并且您将看不到任何更改；如果将其添加三个，则将其删除，然后添加，并且在添加时您将看到该类，依此类推第四li，第一个会发生4次点击事件，当您点击...时，您不会发现任何变化。

li.addEventListener('click', strike);

li

var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");

// strikethrough task on click
function strike() {
  if (this.classList.contains("item")) {
    this.classList.toggle("done");
  }
}

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  li.classList.add('item');
  input.value = '';
  li.addEventListener('click', strike);
}

function addToListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addToListAfterEnter(event) {
  if (inputLength() > 0 && event.keyCode == 13) {
    createListElement();
  }
}

button.addEventListener('click', addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);

onClick仅适用于所有其他用户

1 个答案: