Lista de la compra con jQuery

Lista de la compra con jQuery

Hacer una lista de la compra a partir de un campo de texto de un formulario es un ejercicio típico en todo curso de javascript.

El ejercicio que se presenta es la continuación pero en este caso resuelto con jQuery.

Hay algunos conceptos clave que te pueden ser útiles.

  • Identificar el value de un campo <input>con jQ
  • Crear, modificar y eliminar nodos con jQ
  • Instrucciones html() y css()
  • Concepto de this
  • Asignar varios eventos a un mismo nodo.

Vamos a repasarlo mediante un ejercicio.

Enunciado

A partir del documento html que se te presenta escribe un script que permite capturar las informaciones que un usuario escriba en el<input> y las escriba en el elemento <ol id="listaCompra"></ol> cuando el usuario pulse el botón añadir.

Los elementos lista deben tener el siguiente comportamiento:

  • Cuando se haga clic sobre un elemento lista creado este debe tacharse y ponerse en cursiva.
  • Cuando se haga doble clic sobre un elemento este se debe borrar.

Cuando se pulse el botón resetear la lista sea pulsado se deben borrar todos los elementos<li>.

lista ordenada de la compra con jquery
lista ordenada de la compra con jquery
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejercicio acoplamiento Javascript">
        <meta name="author" content="Francesc Ricart">
        <title>Ejemplo de acoplamiento javascript</title>
        <script>
            window.alert("te saludo");
        </script>
    
    </head>
    <body>
        
    <p>En este ejercicio queremos que los scripts lean el código en hojas separadas</p>
        <script>
            window.alert("te saludo otra vez por si no te has percatado");
        </script>

    </body>
</html>

Solución del ejercicio

El problema se puede resolver dividiéndolo en otros 3 más sencillos.

En primer lugar capturamos el campo escrito por el visitante web y después creamos un nodo que injertamos en la lista ordenada.

Una vez resuelto el problema anterior se trata de hacer que una vez pulsado el botón añadir el <input> quede de nuevo vacío preparado para volver a escribir otro elemento.

En el tercer caso asignamos a cada elemento <li> dos eventos: el click y el doble click.

$(document).ready(function(){
$("#anadirCompra").click(function(){

	//capturamos el campo input y creamos un nodo y lo injertamos
	var nuevoTexto = $("#compra").val();
	var nuevoLi = document.createElement("li");
	$(nuevoLi).html(nuevoTexto);
	$("#listaCompra").append(nuevoLi);

	//reseteamos el campo input
	$("#compra").val("");

	//asiganmos eventos al nodo creado
	$(nuevoLi).on({
		click:function(){
			$(this).css({
				"text-decoration":"line-through",
				"font-style":"italic"
			})
		},
		dblclick: function(){
			$(this).remove();
		}
	})
})
$("#reset").click(function(){
	$("li").remove()
})
})

¡Hola!

Querido lector,

La solución presentada no incluye el caso que se añada un elemento cuando el campo <input> está vacío. ¿Como harías para que no se añadan elemento <li> cuando esto sucede?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.