Question

我在点击时调用一个函数。该函数有一个if / else inside，用于检查父类的className。如果是，我删除了类，假如我添加了一个类。但它只在第一个列表项中工作。它没有设置类可编辑。

可能是什么问题？

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模板中，您可以从get go：

添加点击处理程序

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

Answer 3

您面临的问题是因为您一次又一次地为所有未完成的任务附加侦听器。您只需要为正在添加的任务附加事件侦听器，而不是为那里的所有任务附加事件侦听器。

Javascript没有在if语句中添加className

3 个答案: