0

Me gustaría saber como haría para mostrar este listado del contador de forma individual Me llega el contador traducido a segundos minutos y horas a este bloque

<?php 

  $timerQuery = "SELECT * FROM timer WHERE id_user=".$_SESSION['id_user'];

  $timers = $db->query($timerQuery);

 ?>


  <?php while ($timer=$timers->fetch_assoc()) { ?>
      <div class="row px-5 justify-content-center aceituna" id="block">
          <div class="col-10 field-border-data px-5" id="element">
            <div class="row py-4 align-items-center">
              <div value hidden><?=$timer['id']?></div>
              <div class="col-5 font-weight-bold"><?=$timer['title']?></div>
              <div class="col-2" id="categories"><?=$timer['id_category']?></div>
              <a href="deletetimer.php?id=<?=$timer['id']?>" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i></a>
              <div id="data-count" hidden><?=$timer['count']?></div>
              <div class="col-3 text-right text-time" id="show-count"><span id="hours_data">00</span>:<span id="minutes_data">00</span>:<span id="seconds_data">00</span></div>
            </div>
          </div>
      </div>
  <?php }?>


//Mostrar datos del contador de segundos a tiempo de (sec, mins y horas)
$(document).ready(function(){
 var sec = $('#data-count').html();
 function pad ( val ) { return val > 9 ? val : "0" + val; }
    $("#seconds_data").html(pad(++sec%60));
    $("#minutes_data").html(pad(parseInt(sec/60%60,10)));
    $("#hours_data").html(pad(parseInt(sec/3600,10)));
});

El código escrito no es la representación total, pero es lo único que estoy tocando para mostrar los contadores.

La cosa es que tengo la idea de que el problema son los identificadores únicos(id) que hay que distinguirlos en distintos nombres cada uno, pero no se como hacerlo realmente.

1 respuesta 1

0

Necesitas sustituir los id con los class. Los id deben ser únicos en la página.

Cuango lo hagas, necesitarás un otro bucle en Javascript para procesar cada <div class="block"> individualmente:

$(document).ready(function(){
  $(".block").each(function(){
    var block = $(this);  

    var sec = $block.find('.data-count').html();
    $block.find(".seconds_data").html(pad(++sec%60));
  });
});
1
  • Hola muchas gracias por responderme, ahora parece que si me lo individualiza pero me muestra los valores siempre del primer elemento. Osea, ahora ya no es 00:00:00 en todos ahora sale 00:00:04 en todos y en cambio los demás tienen otros tiempos en la base de datos. Igualmente le echare un ojo a como tengo las consultas, pero debería ir bien. Un saludo! Commented el 23 may. 2020 a las 17:21

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.