1

intento construir un slider con php, donde los div que genero su id es la id de la foto que se muestra y cuentan con una clase active que va cambiando de div en div para ir mostrando estas imagenes en función de si el usuario le da un left-slid o right-slide. Aquí una muestra :

<div class="slider">
  <div class="slider-items">
    <?php foreach ($nuevo_array as $row){?>
    <div id="<?php echo $row['idPhoto']?>" class="item <?php if($row === end($nuevo_array)) echo "active" ?> ?>">
      <img class="ampliar" src="uploads/<?php echo $row['urlPath']?>" />
      <div class="caption">
        <p id="total_<?php echo $row['idPhoto']?>" style="color: white;"><?php echo "$row[likes]"?></p>
      </div>
    </div>
    <?php } ?> 
  </div>

  <div onclick="like()" ><div  class="left-slide" ><i class="fas fa-thumbs-up"></i></div></div>
  <div onclick="dislike()"><div class="right-slide"  ><i  class="fas fa-thumbs-down"></i></div></div>    

Y quiero que cada vez que se de click a left o right antes de pasar a la siguiente imagen que va a tener la clase active, guarde la id de la imagen exacta antes de mostrarse la siguiente, lo que pasa es que una vez doy click me agarra la id de la siguiente imagen que aparece y tiene la clase active.

Un ejemplo tengo una imagen en este momento de un gato con id=3, al hacer click sea left o right y mientras pasa a la siguiente imagen pasandole tambien la clase active, guarde la id=3 y haga lo que tenga que hacer, pero mi js cuando hace click me guarda la id de la siguiente imagen pongamos un ejemplo que la siguiente imagen es un caballo con id=10, pues me agarra esa id y no es lo que quiero.

Como a la hora de hacer un foreach o un while, el left o right no pueden recibir la id, porque si no recibirían todas las id de todas las imagenes, no encuentro otra forma que hacerlo por javascript para saber en que momento cual es cual.

Lo que habia intentado con el javascript:

function search_id(){

  var elemento = document.getElementsByClassName('active'); 
  var cantidad = elemento.length;
  //var array_id = Array();
  var encontrado;
  for(var i = 0; i < cantidad; i++){
      var id = elemento[i].getAttribute('id');
      conseguido=id;
  }

  return encontrado;
}


function like(){
  var id = search_id();
  console.log("Ha hecho like en la foto: "+id);
  like_update(id);
}


function dislike(){
  var id = search_id();
  console.log("Ha hecho dislike en la foto: "+id);
}

El slider funciona perfectamente, pilla la id y funciona genial, pero intentando implementar en la página web completa salta un error al intentar deslizar el slider de :

Uncaught TypeError: Cannot read property 'id' of null at HTMLDivElement.sliderMove (slider.html:389)

Lo que me salta es en esta linea del código :let id = active.querySelector('img').id;

Si vuelvo a dar al slider me salta otro error:

Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.sliderMove

Que en el js es: activo.classList.remove('activo');

De forma normal si solo dejo en la web el html del slider funciona, pero probando he quitado el navbar que es de bootstrap y no me salen más esos errores, si lo vuelvo a colocar vuelven a saltar los mismos. Este es el html del navbar:

  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <!-- <a class="navbar-brand" href="index.html"><h2>Sixteen <em>Clothing</em></h2></a> -->
      <a class="navbar-brand" href="#">
        <img src="./img/logov2.png" width="200" height="50" class="d-inline-block align-top" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="home.html">Home</a>
          </li> 
          <li class="nav-item">
            <a class="nav-link" href="upload_file.html">Subir foto</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="slider.html">Slider</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              LogOut
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Usuario</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Cerrar Usuario</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Y el código js del slider que me ha ayudado y que he modificado un poco es este: let divs = document.querySelectorAll('.item'); let com = document.querySelectorAll('.itemo');

function sliderMove(e) {
    
    let active = document.querySelector('.active');
    let activo = document.querySelector('.activo');
    
    active.classList.remove('active');
    activo.classList.remove('activo');

    let id = active.querySelector('img').id;
    
    let actual = Array.from(divs).indexOf(active);
    let actual2 = Array.from(com).indexOf(activo);
    
    if(e.target.closest('div').className == 'left-slide') {
        console.log('Ha hecho like en la foto: ' + id);
        actual = (actual == 0) ? divs.length - 1 : actual - 1;
        actual2 = (actual2 == 0) ? com.length - 1 : actual2 - 1;
    } else {
        console.log('Ha hecho dislike en la foto: ' + id);
        actual = (actual < divs.length - 1) ? actual + 1 : 0;
        actual2 = (actual2 < com.length - 1) ? actual2 + 1 : 0;
    }
    divs[actual].classList.add('active');
    com[actual2].classList.add('activo');
}

document.querySelector('.left-slide').addEventListener('click', sliderMove);
document.querySelector('.right-slide').addEventListener('click', sliderMove);
5
  • No necesitas saber su ID, sino la posición que ocupa en el conjunto (arreglo) para saber si puedes retroceder o adelantar.
    – Triby
    Commented el 8 mar. 2021 a las 19:10
  • pero es que necesito saber si ha sido active o no y la id para poder hacer un update en la base de datos, porque no me sirve de nada saber que la id es 10 si no ha sido active antes de cambiar a otra imagen o si es la posición 1 no se si me entiendes. Tampoco ayuda mucho lo que me dices fuera de contexto.
    – Wail
    Commented el 8 mar. 2021 a las 21:14
  • 1
    Seguramente el navbar también usa la clase active, solo hay que ser específico en el elemento que se desea obtener: let active = document.querySelector('.slider-items.active'); Edité la respuesta para aplicar ese cambio.
    – Triby
    Commented el 9 mar. 2021 a las 21:15
  • Ahora funciona correctamente, mil gracias! Podría preguntar que recomiendas para mejorar en js? Para mi sigue siendo un lenguaje nuevo y hay cosas que me cuesta llegar a entender o de realizar a diferencia de otros lenguajes.
    – Wail
    Commented el 9 mar. 2021 a las 21:20
  • 1
    Yo normalmente aprendo de acuerdo al proyecto, busco tutoriales para hacer lo que necesito e investigo cada función, clase o método para ver si puedo mejorar u optimizar lo que encuentro. Realmente no hay una ruta de aprendizaje, aunque hay sitios como edabit que incluyen retos y pueden servirte para ir probando tus avances.
    – Triby
    Commented el 9 mar. 2021 a las 21:24

1 respuesta 1

2

Como te dije en comentarios, para saber cómo retroceder o avanzar no necesitas ID, solo la posición del elemento actual y eso es independiente del ID de foto, que sí lo necesitas para aplicar los cambios "like / dislike":

Además, te recomiendo usar una sola función para ejecutar cuando se haga clic en los botones, te va a ayudar a que no dupliques código y, dentro, puedes analizar la acción a realizar.

Nota: Cuando haces clic en el botón left-side y estás en el primer elemento, se va a mostrar el último y, si estás en el último elemento y haces clic en right-side, se mostrará el primero.

En cada instrucción hay comentarios para que veas lo que se hace y cómo se hace. No dudes en preguntar si algo no quedó claro.

// Obtener todos los divs del slider
let divs = document.querySelectorAll('.slider-items');

// Función para mover slider adelante o atrás, recibiendo evento como parámetro
function sliderMove(e) {
    // Obtener elemento activo
    let active = document.querySelector('.slider-items.active');
    // Quitar clase
    active.classList.remove('active');

    // ¿Necesitas ID de la foto?
    // Obtener desde el primer div del elemento activo
    let id = active.querySelector('div').id;
    
    // Obtener posición del elemento actual
    let actual = Array.from(divs).indexOf(active);
    
    // Saber la acción que se debe realizar, obteniendo clase del botón
    if(e.target.closest('div').className == 'left-slide') {
        // Clic en anterior
        // ***** AQUI GUARDAS EL LIKE *****
        console.log('Ha hecho like en la foto: ' + id);
        // Calcular elemento anterior
        actual = (actual == 0) ? divs.length - 1 : actual - 1;
    } else {
        // Clic en siguiente
        // ***** AQUI GUARDAS EL DISLIKE *****
        console.log('Ha hecho dislike en la foto: ' + id);
        // Calcular siguiente elemento
        actual = (actual < divs.length - 1) ? actual + 1 : 0;
    }
    // Mostrar anterior o siguiente
    divs[actual].classList.add('active');
}

// Asignar evento a botones
document.querySelector('.left-slide').addEventListener('click', sliderMove);
document.querySelector('.right-slide').addEventListener('click', sliderMove);
.slider-items {
    display: none;
}

.slider-items.active {
    display: block;
}
.left-slide, .right-slide {
    cursor: pointer;
}
<div class="slider">
    <div class="slider-items active">
        <div id="elemento-1">
            HTML o imagen o imagen + texto # 1
        </div>
    </div>
    <div class="slider-items">
        <div id="elemento-2">
            HTML o imagen o imagen + texto # 2
        </div>
    </div>
    <div class="slider-items">
        <div id="elemento-X">
            HTML o imagen o imagen + texto # X
        </div>
    </div>

    <div>
        <div class="left-slide"><i class="fas fa-thumbs-up">-</i></div>
    </div>
    <div>
        <div class="right-slide"><i class="fas fa-thumbs-down">+</i></div>
    </div>
</div>

10
  • Ostras, jamás se me hubiera ocurrido de esta forma, ahora entiendo todo como lo has planteado y con el código comentado. Probare a ver que tal funciona y muchísimas gracias. Si tengo cualquier duda, te comento
    – Wail
    Commented el 8 mar. 2021 a las 23:14
  • Como duda así, es que yo ya cuento con un script.js que me hace el efecto slider, entonces seria aplicando el código que me has comentado en el mismo script del efecto estaría correcto ? Aun no lo he probado.
    – Wail
    Commented el 8 mar. 2021 a las 23:22
  • No, yo ya tenia pensado que fuera manual, no automático. Lo que si queria implementar era que si a esa imagen ya le ha dado dado like no cuente más y si es un dislike lo mismo, seria una buena manera realizar un bool con javascript comprobando la id si es true o no ?
    – Wail
    Commented el 9 mar. 2021 a las 12:23
  • Había pensado como una manera de desactivar el "contador", es decir ha dado like en la imagen con id=2 pues la próxima vez que aparezca en el slider y se le intente dar like no guarde like, pero si le da a dislike puede darle like otra vez y viceversa con dislike.Todo esto iría guardándose en la bd, pero para controlar eso creo que con cookies no seria mala idea, localStorage nunca he tocado.
    – Wail
    Commented el 9 mar. 2021 a las 15:46
  • Si, hice un ajax para guardar en la base de datos el registro de likes y dislikes, lo que pasa es que el usuario puede dar tantos likes y dislikes en la misma foto. Entonces quiero limitar a que solo pueda dar like 1 vez y lo mismo con el dislike, que desactive la puntuación dando al botón contrario. No se si me explico.
    – Wail
    Commented el 9 mar. 2021 a las 15:52

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.