problema con js dentro de un while en php

[oms02]

hola a todos. Estoy teniendo un problema con un codigo en javascript.

No escribo todo el codigo ya que es un poco largo (pero muy simple) y tp creo q sea esencial. Os comento:
Se trata de que quiero mostrar varias cuentas atras (independientes).

Empiezo con php creando una serie de variables (arrays) dentro de un while. Me las llevo a javascript, creo las cuentas atras y las muestro en divs (con imagenes via css).

El problema es el siguiente: si se trata de una sola cuenta atras, todo funciona perfecto, pero cuando he probado con 2, ocurre que el primer conjunto de divs ni se inmuta, ocurriendo la cuenta atras en el 2º conjunto de divs de 2 en 2 segundos.

No entiendo pq leches hace eso, la verdad, pq hago claramente (eso creo yo) la distincion de divs mediante la variable i, pero ..... eso no sucede...

Alguien me puede decir donde tengo el fallo???

Código PHP:

<?php
...
$i=0;
while($tiempos = mysql_fetch_array($consulta))
    {
    $horas[$i][1]=...;
    $horas[$i][0]=...;
    //blablabla...exactamente lo mismo para minutos y segundos....
    ?>
 
<script type="text/javascript">
var decHora = "<?php echo $horas[$i][0] ?>",
uniHora = "<?php echo $horas[$i][1] ?>";
    //blablabla...exactamente lo mismo para minutos y segundos....
var i = "<?php echo $i ?>";
    
cuentaAtras = function(decHora,uniHora,decMin,uniMin,decSeg,uniSeg) {
    $("#dechora"+i).removeClass().addClass("numero"+decHora);
    $("#unihora"+i).removeClass().addClass("numero"+uniHora);
    //blablabla...exactamente lo mismo para minutos y segundos....
    $("#dospuntos1, #dospuntos2").addClass("dospuntos");
}
 
var intervalo = setInterval(function(){
    uniSeg--;
    blablabla....codigo para crear esa cuenta atras....
 
cuentaAtras(decHora,uniHora,decMin,uniMin,decSeg,uniSeg);
},1000);
</script>
<div id="cuentaatras<?php echo $i ?>">
    <div class="tiempos" id="dechora<?php echo $i ?>"></div>
    <div class="tiempos" id="unihora<?php echo $i ?>"></div>
    <div class="tiempos" id="dospuntos1"></div>
    //blablabla...exactamente lo mismo para minutos y segundos....
</div>
    <?php
    $i++;
    }
?>
 

Lo he puesto en texto tipo .php pq al fin y al cabo es un php. Disculpad que sea un poco dificil de "leer".
1 saludo a todos y muchas gracias.

[omarMusic]

Lo que pasa es q estas definiendo variables y funciones con el mismo nombre con cada iteración cambialos por ejemplo aprovechando la variable $i:

var decHora<?php echo $i;?> = "<?php echo $horas[$i][0] ?>";
cuentaAtras<?php echo $i;?> = function(...

y en donde no se necesite repetir variables ni funciones.

Saludos!

[oms02]

Hola Omar. Gracias por responder.

Pues lo cierto es que con tu consejo la cosa ha mejorado pero sin llegar a arreglarse completamente.

Ahora el contador si que baja de 1 segundo en 1 segundo pero el primer grupo de divs (1ª cuenta atras) sigue sin inmutarse.

Me imagino por donde van los tiros pero es que no se como arreglarlo. Creo que el problema esta en que cuando se ejecuta de nuevo el codigo js, los valores de las variables nuevas reemplazan a los valores de las antiguas, pero no se como solucionarlo..

1 saludo a todos y gracias de nuevo.

[oms02]

No se si voy hacia atras como los cangrejos, pero he decidido separar los codigos para hacerlo un poquito mas legible.

Estos dos primeros fragmentos de codigo van totalmente seguidos, en el mismo archivo.

Lo unico que he cambiado es que dentro del contenedor he metido un div en el que escribo los tiempos (en realidad nºs separados por ":") por separado de ambas cuentas-atras. A continuacion, en el fichero reloj.js (ahora externo), recojo los valores y hago lo mismo.

Código PHP:

<?php
...
$i=0;
while($tiempos = mysql_fetch_array($consulta))
    {
    $horas[$i][1]=...;
    $horas[$i][0]=...;
    ?>
 

Código HTML:

<div class="contenedortiempos">
    <div id="numeros-cuentaatras<?php echo $i ?>"><?php echo $horas[$i][0].":".$horas[$i][1] ?></div>
    <script type="text/javascript">reloj(<?php echo $i ?>)</script>
    <div class="tiempos" id="dechora<?php echo $i ?>"></div>
    <div class="tiempos" id="unihora<?php echo $i ?>"></div>
    <div class="tiempos" id="dospuntos1"></div>
</div>
    <?php
    $i++;
    }
?>
 

y ahora el fichero js

Código Javascript:

function reloj(i)
{
var digitos = $("#numeros-cuentaatras"+i).text();
var digito = digitos.split(':');
var decHora = digito[0],
    uniHora = digito[1];
    
cuentaAtras = function(decHora,uniHora,decMin,uniMin,decSeg,uniSeg) {
    $("#dechora"+i).removeClass().addClass("numero"+decHora);
    $("#unihora"+i).removeClass().addClass("numero"+uniHora);
    $("#dospuntos1, #dospuntos2").addClass("dospuntos");
}
 
var intervalo = setInterval(function(){
    ...
    ...el codigo que hace la cuenta atras...
    ...
cuentaAtras(decHora,uniHora,decMin,uniMin,decSeg,uniSeg);
},1000);
 
}
 

El resultado es el mismo. Ahora la cuenta atras si que la hace correctamente (de segundo en segundo) pero de nuevo, el 1er conjunto de divs completamente parado.

"Estaba convencido" de que asi funcionaria (a mi modo ver hago que ambos sean totalmente independientes, llamando a la misma funcion pero haciendo referencia a lugares del DOM diferentes), pero....mi gozo en un pozo.

Alguna idea porfavor??

Un saludo a todos y gracias de nuevo por el interes.

[oms02]

ARREGLADO.

cuentaAtras = function(decHora,uniHora,...,i)

Gracias de todas formas por el interes mostrado. 1 saludo a todos!