0

Me piden que cada vez que se toque un item, se tache automáticamente. Para esto tengo la siguiente clase para aplicarla sólo y sólo cuando el usuario de click a un < li > :

.done {
  text-decoration: line-through;
}

Soy incapaz de encontrar un DOM selector que me seleccione todos los "li".

Si hago esto

var li = document.getElementsByTagName("li");

function toggling(){
li.classList.toggle("done");
}

li.addEventListener("click", toggling);

Me dice "li is not defined". (Y Si pruebo con querySelectorAll me dice "li.addEventListener is not a function").

Así que he hecho esto, que consiste en que cada vez que cambie el parametro de tachar, cojerá un index diferente:

function tachar(posicion){
	var li = document.getElementsByTagName("li")[posicion];
	function toggling(){
	li.classList.toggle("done");
	}
	li.addEventListener('click', toggling);
	}

tachar(0);

Ahora, cómo hacer una función en la que haga tachar(), unas 100 veces por ejemplo cambiando cada una el parametro, hasta llegar a 100, y asi me aseguro que los 100 items primeros se van a poder tachar. Quiero hacer esto para asi evitar tener que poner "tachar(0)", "tachar(1)" así hasta 100.

Sé que me estoy complicando mucho pero llevo un rato mirando como hacerlo de la manera simple y rápida (la primera) pero sigo sin entender como funciona los selectores DOM y no logro coger todos de una.

2 respuestas 2

3

La manera simple y rápida la tienes casi bien, sólo que para añadir un evento no puedes aplicarlo a todos los li al mismo tiempo, sino que hay que ir de uno en uno:

function toggling(li){
    li.classList.toggle("done");
}

document.querySelectorAll("li").forEach(el => {
    el.addEventListener("click", () => toggling(el));
});

En ES5, sin funciones arrow, sería así:

function toggling(li){
    li.classList.toggle("done");
}

document.querySelectorAll("li").forEach(function(el) {
    el.addEventListener("click", function(){ toggling(el); });
});

Si los li se añaden dinámicamente, entonces hay que usar un evento delegado. Para este tipo eventos, es necesario asociar el evento al contenedor que tenga en su interior los elementos objetivo:

HTML

<ul id="parent">
    <li>elemento 1</li>
    <li>elemento 2</li>
    [elementos dinámicos]
</ul>

JS con evento delegado

document.querySelector("#parent").addEventListener("click", ev => {
    if( ev.target && ev.target.nodeName === "LI" ) toggling(ev.target);
}); 

Si quieres afinar más la captura de los elementos objetivo, en ese if podrías mirar que tuvieran una clase o un atributo específico.

Te recomiendo esta lectura para entender un poco mejor cómo funcionan los eventos (está en inglés): https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

2
  • Interesante. Que tendría que modificar para que se aplicase también a nuevos < li > añadidos? Me explico, esta es una lista de la compra también con un input para escribir texto, así que cada vez que escribes en el input "Manzana" por ejemplo, se añade a la lista < ul >. Si intento tachar el nuevo < li > añadido, no me lo tacha con ninguna de las dos soluciones. Commented el 23 ene. 2019 a las 13:28
  • Para eso debes usar un evento delegado. Añado un ejemplo a la respuesta.
    – kosmosan
    Commented el 23 ene. 2019 a las 14:34
1

Añado un ejemplo con jquery en el que con each se recorren los elementos creados desde un inicio y, tras añadir elementos a la lista, se gestionan los nuevos elementos en el evento onclick del documento, de modo que se puede aplicar el efecto css tanto a los elementos iniciales como a los añadidos de forma sencilla.

$(".item").each(function () {
  $(this).click(function () {
    $(this).addClass("marcar");
  });
});
$("#additem").click(function () {
  if ($("#newitem").val()!="") {
    $("#lista ul").append('<li class="itemadded">'+$("#newitem").val()+'</li>');   
  }
});
$(document).on('click','.itemadded', function(){
   $(this).addClass("marcar");
}) 
.marcar {text-decoration: line-through;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lista">
<ul>
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
</ul>
</div>
<input type="text" name="newitem" id="newitem">
<input type="button" name="additem" id="additem" value="Añadir">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.