的Javascript不是if语句

我呼吁点击的功能附加的className。该函数具有一个if/else内部，用于检查父级的className。在真的我删除类，错误我添加一个类。但它只在第一个列表项中工作。它不设置类编辑表。的Javascript不是if语句

可能是什么问题？

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 = ''; 
    } 
}

您可以在这里看到的活生生的例子：

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

来源

2016-03-08 Jabba Da Hoot

如何要绑定事件，这些元素？ –

@RajaprabhuAravindasamy在for循环中。看到这里-rule91-HTTPS：//jsfiddle.net/vbjfbr57/ –

你有你的addTask函数中一个奇怪的结构。您已经有权访问新的li元素。只需将事件侦听器直接添加到li即可。根本不需要for循环。 – Prashant

我的意思是修改addTask功能，所以它重视的事件监听器新建里并在其相关的儿童。我很快修改了你的代码，不知道它是否有效，但它应该给你方向。

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); 
};

来源

2016-03-08 18:11:46 Prashant

它的作品！谢谢！我现在知道了。建立HTML之后，您将获得delete/editLi并为其添加侦听器。而不是循环所有的功能。谢谢！ –

你明白了！非常感谢您在尝试学习JavaScript时与vanilla JS合作。你走在正确的道路上。祝你好运 – Prashant

谢谢！我习惯了jQuery。但我已经掌握了它。 –