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>

Answer 1

你可以簡單地使用toggle的方法classList交換你的班級li秒。 只需選擇所有li然后將其click事件處理程序設置為可切換類的函數即可。

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/

Answer 2

該腳本僅解析文檔一次， document.querySelector("li.completed.selected")返回一個節點。 因此，刪除這些類僅在解析腳本時具有該類的“ 一個任務”上起作用。

您需要手動將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;

}

Answer 3

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

我只是為此使用了 setTime，並且工作正常。