[SOLUCIONADO] Comprobar click de multiples elementos

[kodaichi]

Hola a todos, estoy aprendiendo javascript por mi cuenta y me he topado con un problema al que, por más que busco, no le hallo solución.

Tengo un slider de imágenes con transiciones, en el cual cambio el nombre de la ruta de imagen dependiendo del número de bullet en el que se haya hecho click.

Ej. 'click' en bullet 3 = Cambiar imagen a slider_img3.png

[URL="http://codepen.io/GhostOrder/pen/xgZOao"]Aquí[/URL] dejo el codepen de mi slider:

Hasta aquí todo bien.

El problema viene cuando tengo que añadir mas sliders en la misma pagina pero cada grupo de imágenes tiene un prefijo distinto en su nombre, por ejemplo:

Slider1 : slider1_img1.png, slider1_img2.png, slider1_img3.png
Slider2 : slider2_img1.png, slider2_img2.png, slider2_img3.png

Siendo que la única diferencia en mi función para cambiar imágenes es el nombre de la ruta de imagen, me gustaría usar una sola función que, mediante un condicional, compruebe en que slider se ha hecho clic y dependiendo del resultado cambie el nombre de la ruta de imagen.

No se si me explico bien.

Este fue mi intento y obviamente fallo:

Código javascript:

var aboutSectionListItems = document.getElementsByClassName('carousel-index')[0].children; // Lista de bullets del slider 'about'
var helpSectionListItems = document.getElementsByClassName('carousel-index')[1].children; // Lista de bullets del slider 'help'
var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); // elemento <img>
var bulletList = [aboutSectionListItems, helpSectionListItems]; //Array con todos los bullets
var bulletNumber; //Variable con la que se cambia el nombre de la imagen, dependiendo en que número de bullet se haya hecho click.
 
for(i = 0; i < bulletList.length; i++){// basicamente 'i' representa a los contenedores de los bullet del slider
  (function(index){
    for (j = 0; j < bulletList[i].length; j++) {// 'j' representa a los bullets
      var _bulletListSelf = bulletList[i][j];
      bulletList[i][j].onclick = function(){
        bulletNumber = index;
        imageChanger[0].className = "fade-out";
        setTimeout(function (){        
          if(onclick.target == _bulletListSelf[0][j]){// Si se hace click en algun bullet del slider 'about',
          //entonces cambiar la ruta de imagen usando el prefijo 'img/about_slider_'          
            imageChanger[0].setAttribute('src', 'img/about_slider_' + (bulletNumber + 1) + '.png');
          }if(onclick.onclick == _bulletListSelf[1][j]){// Si se hace click en algun bullet del slider 'help',
            //entonces cambiar la ruta de imagen usando el prefijo 'img/help_slider_'                   
            imageChanger[0].setAttribute('src', 'img/help_slider_' + (bulletNumber + 1) + '.png');
          }
        }, 201);
        setTimeout(function (){
          imageChanger[0].className = "fade-in";
        }, 401);
      }
    }
  })(i);
}
 

Se que la solución más fácil podría sería usar una función para cada slider, pero entonces estaría repitiendo el código muchas veces, prefiero buscar una manera de simplificar e código y hacerlo fácil de mantener.

Como comento en el código, mi idea es comprobar en que bullet se ha hecho click y cambiar la ruta de la imagen dependiendo del resultado.

Si no me explique bien por favor decírmelo, llevo mucho tiempo intentado resolver esto así que estaría muy agradecido si pudieran brindarme ayuda.

Saludos.

[siddartha23]

Yo lo resolvería usando Programación Orientada a Objetos, que básicamente es: generar un objeto llamado Slider, definirle sus parámetros y métodos. Luego puedes instanciar cuantos slider quieras y cada uno va funcionar independiente del otro...

[Alexis88]

1. Define el conjunto de opciones en una variable:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
}, false);
 

2. Delega el evento click al listado de id "carousel-index":

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        //Instrucciones
    }, false);
}, false);
 

3. En cada clic, verifica que se haya clickeado una opción (elemento <li>) y obtén el número de posición que ocupa en el conjunto de opciones:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        if (event.target.tagName == "LI"){
            var numero = opciones.indexOf(event.target);
        }
    }, false);
}, false);
 

4. Si el número de posición de la opción, con respecto al conjunto de opciones, es mayor a -1 (existe), súmale uno y ese será el valor que deberás concatenar en la ruta de la imagen:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        if (event.target.tagName == "LI"){
            var numero = opciones.indexOf(event.target);
 
            if (numero > -1){
                imageChanger[0].src = "https://civilian-interviewe.000webhostapp.com/img/mini_slider_" + (numero + 1) + ".png";
            }
        }
    }, false);
}, false);
 

[kodaichi]

Iniciado por siddartha23

Yo lo resolvería usando Programación Orientada a Objetos, que básicamente es: generar un objeto llamado Slider, definirle sus parámetros y métodos. Luego puedes instanciar cuantos slider quieras y cada uno va funcionar independiente del otro...

Buen punto, parece que es un buen momento para aprender opp.

He estado leyendo sobre el tema, pero podrías darme un pequeño ejemplo?

Saludos.

Alexis88, gracias por la respuesta pero creo que no me explique bien, yo ya tengo un slider, lo puedes ver [URL="http://codepen.io/GhostOrder/pen/xgZOao"]aquí[/URL], y creo que tu código también hace lo mismo. Mi problema es que necesito agregar más sliders en en una misma página, las imágenes de cada slider tienen una ruta distinta.

Lo que quiero hacer es algo como esto:

Código HTML:

<section id="productos">
  <div class="slider">
    <img src="img/slider-productos_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 
<section id="servicios">
  <div class="slider">
    <img src="img/slider-servicios_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 
<section id="otra-seccion">
  <div class="slider">
    <img src="img/otra-seccion_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 

Actualmente tengo un código funcional(el que esta en el codepen) pero es aplicable a un solo slider:

Código Javascript:

var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
 
for (i = 0; i < listItemContainer.children.length; i++) {
  (function(index) {
    listItemContainer.children[i].onclick = function() {
      bulletNumber = index;
      imageChanger[0].className = "fade-out";       
      setTimeout(function(){ 
        imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png');
      }, 201);       
      setTimeout(function(){ 
        imageChanger[0].className = "fade-in";
      }, 401);      
    }
  })(i);
};
 

Como ves, si quisiese replicar esta función a cuantos slider crease en mi html, lo único que cambiaría sería la ruta de la imagen, y siendo ese el caso, pienso que mediante un condicional se podría comprobar en que bullet de que slider se hizo click y luego cambiar la ruta de la imagen.

Por ejemplo:

- Si se hizo click en el bullet 3 del slider 'productos', entonces cambiar la ruta de imagen usando el nombre 'slider-productos', de manera que la ruta completa sería 'slider-productos_img3.png'.
- Pero si se hizo click en el bullet 2 del slider 'servicios', entonces cambiar la ruta de la imagen usando el nombre 'slider-servicios', de manera que la ruta completa sería 'slider-servicios_img2.png'.

Saludos.

[Alexis88]

En ese caso, el código de mi ejemplo tendría que estar en una función, misma que recibirá el id de la sección como argumento y la ruta, sin el número de orden, de la imagen:

Código Javascript:

function cambiarSlider(id, ruta){
    var opciones = document.querySelectorAll("#" + id + " li");
 
    document.querySelector("#" + id).addEventListener("click", function(event){
        if (event.target.tagName == "LI"){
            var numero = opciones.indexOf(event.target);
 
            if (numero > -1){
                imageChanger[0].src = ruta + (numero + 1) + ".png";
            }
        }
    }, false);
}
 

De esta manera, el código se convierte en reutilizable por todos los sliders que tengas.

[mpozo]

Código Javascript:

var numero = opciones.indexOf(event.target);
 

Me temo que esta línea es erronea. El error es que indexOf() no rspto una función. Para no tener ese problema podemos usar forEach(), slice() o indexOf con prototipos.

[Alexis88]

Por responder rápido, olvidé que no se trata de un arreglo. Y eso que ya he hecho cosas así antes, pero me ganó la premura.

Código Javascript:

var numero = [].indexOf.call(opciones, event.target);
 

[kodaichi]

Iniciado por Alexis88

Por responder rápido, olvidé que no se trata de un arreglo. Y eso que ya he hecho cosas así antes, pero me ganó la premura.

Código Javascript:

var numero = [].indexOf.call(opciones, event.target);
 

En primer lugar, quiero disculparme por no responder antes.

Gracias Alexis, esto es precisamente lo que estaba buscando, la función es mas pequeña de lo que hubiera imaginado.

El problema estaría resulto pero, si no fuera mucha molestia, ¿podrías explicarme a grandes rasgos el porque de '[]' ? he estado leyendo sobre prototype y call para entender esa linea pero no lo consigo.

Gracias nuevamente y saludos.

[mpozo]

Es una abreviatura. Hay gente que lo llama array anónimo.

Obtendrás el mismo resultado con ambas maneras

Código Javascript:

[].indexOf.call(opciones, event.target);
Array,prototype.indexOf.call(opciones, event.target);
 

[kodaichi]

Iniciado por mpozo

Es una abreviatura. Hay gente que lo llama array anónimo.

Obtendrás el mismo resultado con ambas maneras

Código Javascript:

[].indexOf.call(opciones, event.target);
Array,prototype.indexOf.call(opciones, event.target);
 

Gracias mpozo! soy nuevo en JS, de hecho programación en general y esos corchetes empezaban a confundirme.

Saludos!