Hola
zyon:
No se puede probar tu código, pero igual acierto con la respuesta.
Si pruebas ésto:
Código PHP:
<div id="contenedor">
<div>uno</div>
<div>dos</div>
<div>tres</div>
</div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
var hijosDIV = $("contenedor").getElementsByTagName("DIV");
for( var i=0, l=hijosDIV.length; i<l; i++ ) {
hijosDIV[i].onclick = function() {
alert(i);
}
}
// -->
</script>
Verás que hagas click en la capa que hagas, siempre se alerta
3. Ésto es porque la variable
i cuando se pide su valor dentro del
onclick es
3.
Para que cada capa tenga su
i tenemos que aislar el ámbito de
i (o de una copia de
i) para que no sea tan global. Es decir, que al modificar
i no se modifique nuestra variable más encerrada:
Código PHP:
<div id="contenedor">
<div>uno</div>
<div>dos</div>
<div>tres</div>
</div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
var hijosDIV = $("contenedor").getElementsByTagName("DIV");
for( var i=0, l=hijosDIV.length; i<l; i++ ) {
( function() { // cerramos (closure) para que aux tenga validez sólo aquí dentro, y no se pueda modificar desde fuera.
var aux = i;
hijosDIV[i].onclick = function() {
alert(aux);
}
} ) ();
}
// -->
</script>
Igual te parece rara la sintaxis. Dentro del
for() aparece una
function() auto-ejecutable que contiene una copia de
i:
aux. Ése
aux sólo es modificable desde dentro de nuestra función anónima (o desde dentro de cada onclick). Lo bueno que tiene ésto, es que
aux guarda lo que
i valía en ese momento, y al modificar
i no se modifica
aux.
Más aquí:
De closures y valores «inesperados»: el porqué y una solución
Si no es ése el error, me va a costar un poco más.
Un saludo.