elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Problema con ejercicio con objeto DOM
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con ejercicio con objeto DOM  (Leído 165 veces)
jamatbar

Desconectado Desconectado

Mensajes: 100


Ver Perfil
Problema con ejercicio con objeto DOM
« en: 21 Febrero 2021, 20:09 pm »

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/10dDKqS

Descarga 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:

Código
  1. window.onload = function()
  2. {
  3. /**
  4.  * 1. Obtén todos los elementos li como una HTMLCollection dinámica en la
  5.  * constante "oElementosLi". [0,5 puntos]
  6.  */
  7. const oElementosLi = document.getElementsByTagName("li");
  8.  
  9. /**
  10.  * 2. Obtén una NodeList estática con todas las flechas (elementos span que
  11.  * contienen la clase "flechaArriba" y "flechaAbajo") en la constante
  12.  * "oFlechas". [0,75 puntos]
  13.  */
  14. const oFlechas = document.querySelectorAll('span.flechaArriba, span.flechaAbajo');
  15.  
  16.  
  17. /**
  18.  * 3. Añade un manejador del evento click a cada flecha usando la NodeList
  19.  * "oFlechas", un bucle "forEach" y la notación flecha. Al hacer click en
  20.  * una flecha se debe llamar a la función "actualizarLista". [1,75 puntos]
  21.  */
  22.  
  23. oFlechas.forEach(oFlecha => {
  24.    oFlecha.addEventListener("click", actualizarLista);
  25. });
  26.  
  27. /**
  28.  * 4. Implementa la función "actualizarLista" para que:
  29.  *  
  30.  *  -Intercambie el elemento li sobre el que se ha hecho click con su hermano
  31.  *  anterior o posterior dependiendo si se ha pulsado la flecha arriba o
  32.  *  abajo. Pulsar la flecha arriba en el primer elemento o la flecha abajo en
  33.  *  el último no realizará ninguna operación. Utiliza la función
  34.  *  "insertAdjacentElement" y las referencias "parentNode", previousElementSibling"
  35.  *  y "nextElementSibling". [4 puntos]
  36.  *
  37.  *  -Elimine la clase "flechaDeshabilitada" de los elementos que la contengan
  38.  *  y la añada a la flecha arriba del primer elemento y a la flecha abajo del
  39.  *  último elemento. [3 puntos]
  40.  */
  41. function actualizarLista(event) {
  42.    const oFlecha = event.target;
  43.    const oFlechaActual = oFlecha.parentNode;
  44.    const oFlechaAnterior = oFlechaActual.previousElementSibling;
  45.    const oFlechaSiguiente = oFlechaActual.nextElementSibling;
  46.  
  47.    oFlechas.forEach((oFlecha) => {
  48.        if (oFlecha.classList.contains("flechaDeshabilitada")) {
  49.        oFlecha.classList.remove("flechaDeshabilitada");
  50.        }
  51.        });
  52.  
  53.    if(oFlecha.className == "flechaArriba"){
  54.        oFlechaAnterior.insertAdjacentElement("beforebegin", oFlechaActual);
  55.    }else if(oFlecha.className == "flechaAbajo"){
  56.        oFlechaSiguiente.insertAdjacentElement("afterend", oFlechaActual);
  57.    }
  58. }
  59. }

Esta es la estructura HTML:

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.  <meta charset="UTF-8">
  4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.  <link rel="stylesheet" href="style.css">
  6.  <title>Lista interactiva</title>
  7. </head>
  8.  <h1>Lista interactiva</h1>
  9.  <ul>
  10.    <li>
  11.      <span class="flechaArriba flechaDeshabilitada"></span>
  12.      <span class="flechaAbajo"></span>
  13.      <span class="texto">Texto colocado inicialmente en la posición 1.</span>
  14.    </li>
  15.    <li>
  16.      <span class="flechaArriba"></span>
  17.      <span class="flechaAbajo"></span>
  18.      <span class="texto">Texto colocado inicialmente en la posición 2.</span>
  19.    </li>
  20.    <li>
  21.      <span class="flechaArriba"></span>
  22.      <span class="flechaAbajo"></span>
  23.      <span class="texto">Texto colocado inicialmente en la posición 3.</span>
  24.    </li>
  25.    <li>
  26.      <span class="flechaArriba"></span>
  27.      <span class="flechaAbajo"></span>
  28.      <span class="texto">Texto colocado inicialmente en la posición 4.</span>
  29.    </li>
  30.    <li>
  31.      <span class="flechaArriba"></span>
  32.      <span class="flechaAbajo flechaDeshabilitada"></span>
  33.      <span class="texto">Texto colocado inicialmente en la posición 5.</span>
  34.    </li>
  35.  </ul>
  36.  <script type="text/javascript" src="index.js"></script>
  37. </body>
  38. </html>

¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?

Muchísimas gracias de antemano!


En línea

EdePC
Colaborador
***
Conectado Conectado

Mensajes: 1.570



Ver Perfil
Re: Problema con ejercicio con objeto DOM
« Respuesta #1 en: 23 Febrero 2021, 00:23 am »

Pues lo que dice ahí, al final de todo le agregas las clases que se requieren para la primera y última flecha:

Código
  1. oFlechas[0].className = "flechaArriba flechaDeshabilitada"
  2. oFlechas[oFlechas.length-1].className = "flechaAbajo flechaDeshabilitada"

¿Puedes dejar también el CSS?  :xD


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines