Lista de la compra con jQuery

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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 de la compra con jQuery 1

<!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 0 / 5. Votos: 0

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *