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

您面临的问题是因为您一次又一次为所有未完成的任务附加了侦听器。 您只需要为要添加的任务而不是其中的所有任务附加事件侦听器。