classList.añadir No funciona

Estoy tratando de hacer una simple lista de tareas pendientes cosa con JavaScript. Básicamente, se introduce un elemento para el campo de entrada, que se añade a la lista, haga clic en él si es completa, entonces se pone a cruzar. Si hace clic en una lista que ya está tachado, que quita esa línea. Pero mientras que la eliminación de una línea de obras, la adición de una línea a través de no trabajo.

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>
  • classList no es compatible con IE9 y menor. Supongo que no es lo que usted está utilizando? Debido a que event palabra clave parece sospechoso…
  • Lo que usted necesita para llamar a las funciones de los elementos de la clase de evento es la delegación. O usted puede tener los controladores de eventos de verificación en el elemento de la clase y hacer la tarea apropiada.
  • Podrías elaborar más? Especialmente la segunda frase. Se lo agradecería.
  • Compruebe incompleteTask es en realidad referencia a los elementos que creo que sí. Es posible su elaboración, la selección antes de la DOM se ha terminado de cargar.
InformationsquelleAutor Jaeeun Lee | 2014-02-23

2 Kommentare

  1. 1

    La secuencia de comandos analiza el documento sólo una vez y document.querySelector("li.completed.selected") devuelve un nodo. Por lo tanto, la eliminación de las clases sólo funciona en el Una Tarea que tiene esas clases por el tiempo de la secuencia de comandos se analiza.

    necesita agregar onclick controlador manualmente para cada elemento creado, ver 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;
    
    }
    • En realidad querySelector devuelve un único elemento de DOM.
    • De hecho, permítanme parafrasear un poco…
    • Entonces debo agregar un bucle for? ¿Cómo podría solucionarlo?
    • Actualizado, explicó – tal vez demasiado tarde un poco 🙂 disfrute de
  2. 3

    Usted puede simplemente utilizar el toggle método de classList para intercambiar las clases de usted lis. Simplemente seleccione todas sus li y configurar su controlador de eventos click para una función que se activa o desactiva las clases.

    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/

    • +1: toggle es más elegante que contiene + agregar/quitar combo

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...