1

Hola tengo un array de elementos 'li' que a su vez contienen otros elementos html ('a' e 'img'). Estoy haciendo un slider, y para lo cual deseo crear unos botones a los cuales les asigno un AddEventListener para que con eventos del mouse ejecuten cierta función con variables que tienen un valor según el índice que le corresponda a cada elemento en el array y el valor de la propiedad o atributo que necesito mostrar. Para esto uso un for y dentro una función. El problema es que no logro que cada botón devuelva el valor que le corresponde cuando se ejecuta la función, todos los botones devuelven el valor el último elemento del Array. Ya intenté mandar los valores de los arrays como parámetros, también setear para cada botón el atributo onclick para agregarles ahi la función, pero tampoco me funciona.

Si verifico con un console log las variables, si me muestra su valores correspondiente y que el for funciona, el problema, es cuándo hago uso de una función y llamar los valores desde dentro de el.

Espero puedan ayudarme con la solución.

botones = document.querySelectorAll('.s_bullets ul li');
for(b = 0; b<botones.length; b++){
    btnBanner = botones[b];
    imgbullets = btnBanner.querySelector('a span img');
    altBanner = imgbullets.getAttribute('alt');
    console.log(altBanner);
    
    mostrar = function(){
          console.log(`Soy el boton ${b} te enviaré al baner ${altBanner}`);         
        }
    
    btnBanner.addEventListener("click", mostrar);
    btnBanner.addEventListener("mouseover", function(){imgbullets.style.display = "block"});
    btnBanner.addEventListener("mouseleave", function(){imgbullets.style.display = "none"});

}
<div id="slider-container">
  <div class="s_images">
      <ul>
      <li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_0"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/deportivos/" title="Equipos deportivos"><img src="<?php echo $Myurl; ?>data1/images/eventos_deportivos.jpg" alt="Estudiantes interactuando con inflables deportivos en la cancha de basquetball de su colegio." title="Equipos deportivos para tus actividades de integración" id="s_1"/></a></li>
      <li><a href="#"><img src="data1/images/grandes_eventos2.jpg" title="¡Grandes Eventos!" alt="Niños con sus padres jugando en distintos brincolines inflables en un campo de deportivo." title="¡Tu solución para grandes eventos!" id="s_2"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/futbolitos/" title="Futbolitos"><img src="<?php echo $Myurl; ?>data1/images/inflables_y_futbolitos.jpg" alt="Dos brincolines inflables y una mesa de futbolito en un jardín." title="Solo preocupate de tus invitados, nosotros de la diversión" id="s_3"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/brincolines/" title="Eventos empresariales y hoteleros"><img src="<?php echo $Myurl; ?>data1/images/parque_inflables.jpg" alt="Cinco brincolines inflables distribuidos en un salón de eventos." title="Armamos tu propio salón de juegos" id="s_4"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_5"/></a></li>
    </ul>
  </div>
  <div class="s_bullets">
    <ul>
      <li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/acuaticos.jpg" alt="Toboganes Inflables"/>1</span></a></li>
      <li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/eventos_deportivos.jpg" alt="Equipos deportivos"/>2</span></a></li>
      <li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/grandes_eventos2.jpg" alt="¡Grandes Eventos!"/>3</span></a></li>
      <li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/inflables_y_futbolitos.jpg" alt="Futbolitos"/>4</span></a></li>
      <li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/parque_inflables.jpg" alt="Eventos empresariales y hoteleros"/>5</span></a></li>
  </ul>
</div>
  <div class="s_script" ></div>
  <div class="s_shadow"></div>

  </div>

1 respuesta 1

0

No es recomendable crear la función dentro del ciclo, porque se sobreescribe (o se duplica) en cada iteración.

Declara la función fuera del ciclo y ahí obtienes el elemento en el que se hizo clic. Aunque no lo especifiques, cuando asignas funciones por evento, siempre se envía el evento como parámetro y puedes usarlo para acceder al elemento con event.target o nombre_de_variable_del_evento.target:

// Crear la función fuera del for
// e es el nombre asignado a la variable del evento
const mostrar = function(e){
     // Obtener LI del elemento en que se hizo clic
     let btn = e.target.closest('li');
     // Obtener imagen
     let img = btn.querySelector('a span img');
     console.log(`Soy el boton ${btn.dataset.index} te enviaré al baner ${img.getAttribute('alt')}`);
}
let botones = document.querySelectorAll('.s_bullets ul li');
for(b = 0; b<botones.length; b++){
    let btnBanner = botones[b];
    // Agregar índice a cada botón, el atributo alt se obtiene en la función
    btnBanner.dataset.index = b;
    let imgbullets = btnBanner.querySelector('a span img');
    console.log(imgbullets);
   
    
    btnBanner.addEventListener("click", mostrar);
    btnBanner.addEventListener("mouseover", function(){imgbullets.style.display = "block"});
    btnBanner.addEventListener("mouseleave", function(){imgbullets.style.display = "none"});

}
<div id="slider-container">
  <div class="s_images">
      <ul>
      <li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_0"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/deportivos/" title="Equipos deportivos"><img src="<?php echo $Myurl; ?>data1/images/eventos_deportivos.jpg" alt="Estudiantes interactuando con inflables deportivos en la cancha de basquetball de su colegio." title="Equipos deportivos para tus actividades de integración" id="s_1"/></a></li>
      <li><a href="#"><img src="data1/images/grandes_eventos2.jpg" title="¡Grandes Eventos!" alt="Niños con sus padres jugando en distintos brincolines inflables en un campo de deportivo." title="¡Tu solución para grandes eventos!" id="s_2"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/futbolitos/" title="Futbolitos"><img src="<?php echo $Myurl; ?>data1/images/inflables_y_futbolitos.jpg" alt="Dos brincolines inflables y una mesa de futbolito en un jardín." title="Solo preocupate de tus invitados, nosotros de la diversión" id="s_3"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/brincolines/" title="Eventos empresariales y hoteleros"><img src="<?php echo $Myurl; ?>data1/images/parque_inflables.jpg" alt="Cinco brincolines inflables distribuidos en un salón de eventos." title="Armamos tu propio salón de juegos" id="s_4"/></a></li>
      <li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_5"/></a></li>
    </ul>
  </div>
  <div class="s_bullets">
    <ul>
      <li><a href="#" ><span><img src="data1/tooltips/acuaticos.jpg" alt="Toboganes Inflables"/>1</span></a></li>
      <li><a href="#" ><span><img src="data1/tooltips/eventos_deportivos.jpg" alt="Equipos deportivos"/>2</span></a></li>
      <li><a href="#" ><span><img src="data1/tooltips/grandes_eventos2.jpg" alt="¡Grandes Eventos!"/>3</span></a></li>
      <li><a href="#" ><span><img src="data1/tooltips/inflables_y_futbolitos.jpg" alt="Futbolitos"/>4</span></a></li>
      <li><a href="#" ><span><img src="data1/tooltips/parque_inflables.jpg" alt="Eventos empresariales y hoteleros"/>5</span></a></li>
  </ul>
</div>
  <div class="s_script" ></div>
  <div class="s_shadow"></div>

  </div>

Nota: Eliminé los <?php echo $Myurl; ?> de las imágenes para que se pueda probar el funcionamiento.

2
  • Te agradezco mucho, me ayudaste con el problema, y gracias por comentar tu código me sirve para comprender mejor y aprender. Commented el 14 jul. 2020 a las 2:19
  • Si te sirvió, por favor marca la respuesta como aceptada.
    – Triby
    Commented el 14 jul. 2020 a las 4:12

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.