Buenas tengo el siguiente ejercicio:
Implementa una lista interactiva a través de flechas que permita mover los elementos hacia arriba y hacia abajo.
https://ibb.co/10dDKqSDescarga los ficheros proporcionados en esta carpeta compartida de Google Drive e implementa las funciones descritas en el fichero JS.
Consideraciones:
Los ficheros HTML y CSS no deben modificarse.
Antes de empezar a escribir código javascript, analiza la estructura del documento HTML, cómo están formados los elementos de la lista y las clases que utilizan.
-----------------------------------------
Basicamente son 5 elementos li que hay que mover arriba y abajo con la particularidad de que el primer y ultimo elemento tienen los botones de arriba o abajo deshabilitados, y esa ultima parte es la que no consigo.
Yo tengo lo siguiente:
window.onload = function()
{
/**
* 1. Obtén todos los elementos li como una HTMLCollection dinámica en la
* constante "oElementosLi". [0,5 puntos]
*/
const oElementosLi = document.getElementsByTagName("li");
/**
* 2. Obtén una NodeList estática con todas las flechas (elementos span que
* contienen la clase "flechaArriba" y "flechaAbajo") en la constante
* "oFlechas". [0,75 puntos]
*/
const oFlechas = document.querySelectorAll('span.flechaArriba, span.flechaAbajo');
/**
* 3. Añade un manejador del evento click a cada flecha usando la NodeList
* "oFlechas", un bucle "forEach" y la notación flecha. Al hacer click en
* una flecha se debe llamar a la función "actualizarLista". [1,75 puntos]
*/
oFlechas.forEach(oFlecha => {
oFlecha.addEventListener("click", actualizarLista);
});
/**
* 4. Implementa la función "actualizarLista" para que:
*
* -Intercambie el elemento li sobre el que se ha hecho click con su hermano
* anterior o posterior dependiendo si se ha pulsado la flecha arriba o
* abajo. Pulsar la flecha arriba en el primer elemento o la flecha abajo en
* el último no realizará ninguna operación. Utiliza la función
* "insertAdjacentElement" y las referencias "parentNode", previousElementSibling"
* y "nextElementSibling". [4 puntos]
*
* -Elimine la clase "flechaDeshabilitada" de los elementos que la contengan
* y la añada a la flecha arriba del primer elemento y a la flecha abajo del
* último elemento. [3 puntos]
*/
function actualizarLista(event) {
const oFlecha = event.target;
const oFlechaActual = oFlecha.parentNode;
const oFlechaAnterior = oFlechaActual.previousElementSibling;
const oFlechaSiguiente = oFlechaActual.nextElementSibling;
oFlechas.forEach((oFlecha) => {
if (oFlecha.classList.contains("flechaDeshabilitada")) {
oFlecha.classList.remove("flechaDeshabilitada");
}
});
if(oFlecha.className == "flechaArriba"){
oFlechaAnterior.insertAdjacentElement("beforebegin", oFlechaActual);
}else if(oFlecha.className == "flechaAbajo"){
oFlechaSiguiente.insertAdjacentElement("afterend", oFlechaActual);
}
}
}
Esta es la estructura HTML:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <h1>Lista interactiva
</h1> <span class="flechaArriba flechaDeshabilitada"></span> <span class="texto">Texto colocado inicialmente en la posición 1.
</span> <span class="texto">Texto colocado inicialmente en la posición 2.
</span> <span class="texto">Texto colocado inicialmente en la posición 3.
</span> <span class="texto">Texto colocado inicialmente en la posición 4.
</span> <span class="flechaAbajo flechaDeshabilitada"></span> <span class="texto">Texto colocado inicialmente en la posición 5.
</span>
¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?
Muchísimas gracias de antemano!
Mostrar Mensajes
