JavaScript沒有在if語句中添加className

Question

我在點擊時調用一個函數。 該函數內部有一個if / else，用於檢查父級的className。 如果為true，則刪除該類；如果為false，則添加一個類。 但是它僅在第一個列表項中起作用。 它沒有設置class edittable。

可能是什么問題呢？

var editTask = function(elem) {
    if (elem.parentNode.className !== 'edittable') {

        elem.childNodes[0].innerHTML = 'Done';
        elem.parentNode.className = 'edittable';

    } else if (elem.parentNode.className === 'edittable') {

        var setTask = elem.previousSibling.previousSibling.value;
        var taskTarget = elem.previousSibling;

        taskTarget.innerHTML = setTask;
        elem.childNodes[0].innerHTML = 'Edit';
        elem.parentNode.className = '';
    }
}

您可以在此處查看實時示例： http : //www.baasdesign.nl/workspace/taskmanager/

Answer 1

我的意思是修改您的addTask函數，以便將事件偵聽器附加到新創建的li和其中的相關子級。 我迅速修改了您的代碼，不確定它是否有效，但是應該為您提供指導。

var addTask = function (value) {

    // Create new <li>
    var li = document.createElement('li');
    var deleteLi;
    var editLi;

    // Build up HTML
    li.innerHTML = '<input class="checkTask" type="checkbox"/>'; // add checkbox
    li.innerHTML += '<input class="taskInput" type="text" value="' + value + '">'; // add input for edits
    li.innerHTML += '<span class="taskValue">' + value + '</span>'; // add text in span
    li.innerHTML += '<span class="editTask"><small>Edit</small></span><span class="deleteTask"><small>Delete</small></span>'; // edit & delete buttons

    deleteLi = li.querySelector('.deleteTask');
    editLi = li.querySelector('.editTask');

    // Append to uncompleted list
    addToList($uncompletedList, li);

    // Reset task input
    $newTask.value = "";

    // Set uncompletedTask status
    setUncompletedTaskStatus();

    li.querySelector('.checkTask').addEventListener('change', function () {
        taskModifier("check");
    }, false);

    deleteLi.addEventListener('click', function () {
        removeParent(deleteLi);
        setUncompletedTaskStatus();
    }, false);

    editLi.addEventListener('click', function () {
        editTask(editLi);
    }, false);
};

Answer 2

在HTML模板中，您可以從一開始就添加點擊處理程序：

 li.innerHTML += '<span class="editTask" onclick="editTask(this)"><small>Edit</small></span><span class="deleteTask"><small>Delete</small></span>'; // edit & delete buttons

Answer 3

您面臨的問題是因為您一次又一次為所有未完成的任務附加了偵聽器。 您只需要為要添加的任務而不是其中的所有任務附加事件偵聽器。