classList.add 不起作用

Question

我将为您翻译以下内容：

我正在尝试使用JavaScript创建一个简单的待办事项列表。基本上，您在输入框中输入一个项目，它会被添加到列表中，如果完成了，您可以点击它，然后它会被划掉。如果您单击已经划掉的列表，那么它将被移除。但是，虽然删除一行可以正常工作，但是划掉一行却没有起作用。

HTML:

    <div><input type="text" value="" id="new_task"><button id="add_task">Add Task</button></div>

    <ul id="tasks">
        <li class="completed selected">One Task</li>
        <li>Two Task</li>
    </ul>

CSS：

<style type="text/css" media="screen">      
    /*local styles if any (quick tests and local only overrides)*/

    #tasks li{
        list-style: none;
    }

    #tasks .selected{
        list-style: disc;
    }

    .completed{
        text-decoration: line-through;
    }
</style>

JavaScript:

<script type="text/javascript" charset="utf-8">
    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks");
    var newList = document.createElement("li"); 
    var completeTask = document.querySelector("li.completed.selected");
    var incompleteTask = document.querySelector("li:not([class])");

    myButton.onclick = function() {

    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    }

    completeTask.onclick = function() {
    event.target.classList.remove("completed","selected");
    }

    incompleteTask.onclick = function() {
    event.target.classList.add("completed","selected");
    }




</script>

- Jaeeun Lee

---

classList 不支持 IE9 及以下版本。我猜这不是你正在使用的吧？因为 event 关键字看起来很可疑... - MaxArt

你需要通过元素类调用函数的方法是事件委托。或者你可以让事件处理程序检查元素类并执行相应的任务。 - Musa

@Musa：你能详细解释一下吗？特别是第二句话。我会很感激的。 - Jaeeun Lee

请验证 incompleteTask 是否确实引用了您认为的元素。有可能是在 DOM 加载完成之前进行了选择。 - Boaz

在我的情况下，有多个选择器具有该类，因此请确保查看 document.querySelectorAll(selector) 是否选择了正确的元素。 - Shivam Jha

另外，如果您在 classList.add 之后使用 className，则会覆盖 classList.add，使其看起来像 classList.add 不起作用。 - Petr L.

Answer 1

你可以简单地使用 classList 的 toggle 方法来交换你的 li 元素的类。只需选择所有的 li 元素，并将它们的点击事件处理程序设置为一个切换类的函数即可。

function ch() {
    this.classList.toggle("completed");
    this.classList.toggle("selected");
}

var items = document.querySelectorAll('li');
for (var x = items.length - 1; x >= 0; x--){
    items[x].onclick = ch;
}

http://jsfiddle.net/RXH69/

- Musa

Answer 2

脚本只解析一次文档，document.querySelector("li.completed.selected") 返回一个节点。因此，仅对在脚本解析时就拥有这些类别的One Task有效。

你需要手动为每个创建的项目添加onclick处理程序，请参见jsFiddle。

    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks"); 
    var lis = document.querySelectorAll("#tasks li");

function clickHandler() {
      if(event.target.classList.contains("completed"))
         event.target.classList.remove("completed","selected");
      else
         event.target.classList.add("completed","selected");
}

// add onclick handler to existing nodes
for(var i=0; i<lis.length; ++i) lis[i].onclick = clickHandler;

myButton.onclick = function() {
    var newList = document.createElement("li");
    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    // add onclick handler to new nodes
    newList.onclick = clickHandler;

}

- Jan Turoň

---

实际上，querySelector 返回一个单个的 DOM 元素。 - Felix Kling

@JaeeunLee 已更新，已解释 - 或许有点晚了 :-) 请享受。 - Jan Turoň

Answer 3

var element:any = document.querySelector('.' + ele[0].toUpperCase().toString())
console.log(element)`enter code here`
setTimeout(() => {
element.classList.add('classname');
}, 500);

我刚刚用了 setTime out 来做这个，而且工作得很好。

- venkatesh M