Duda simple sobre variables

[Luisfa]

Hola. Sonará a pregunta boba, pero cómo podría crear variables distintas en un bucle FOR. Por ejemplo:

for (x=0;x<10;x++){
var variable+x = $('boton'+x);
}

Gracias :)

[JavierB]

Hola Luisfa. Bienvenido al foro.

Esto lo aprendía del maestro caricatos (¡Hola! )

Código javascript:

for (x=0;x<10;x++){
  window['variable'+x] = $('boton'+x);
}
 

Saludos,

[venkman]

La respuesta ya la tienes, pero permiteme sugerir una alternativa. ¿Has pensado en utilizar un array?

Código javascript:

var variable = new Array();
for (x=0;x<10;x++){
    variable[x] = $('boton'+x);
    // o mejor aún variable.push($("boton"+x));
}
 

[Luisfa]

Gracias Javier, de momento me ha servido, pero he encontrado un nuevo problema. ¿Cambia este modo dentro de una función para llamar a las de fuera?

Estoy tratando de pasar este código:

Código:

button1.addEvent('click', function(){
  if(content1.getStyle('height').toInt() > 0){
        Toggle1.start(0);
  }else{
        Toggle1.start(c1Height);
  }
  button1.toggleClass('button1_');
  return false;
});

...en este bucle FOR:

Código:

for (x=0;x<10;x++){
     window ['button'+x].addEvent('click', function(){
	 if(window ['content' +x].getStyle('height').toInt() > 0){
		 window ['Toggle'+x].start(0);
	}else{
	         window ['Toggle'+x].start(window ['cHeight'+x]);
	}
      window ['button' + x].toggleClass('button'+x+'_');
      return false;
}

Pero me falla en la sentencia de los IF

Código:

if(window ['content' +x].getStyle('height').toInt() > 0)

¿? Ayuda plis

[Luisfa]

He usado arrays como dices Veckman, pero el problema sigue ahí. Creo que ahora podré exponerlo de una forma más limpia y clara:

Código:

var button = new Array();
var content = new Array();
var Toggle = new Array();
  	for (x=1;x<lis.length+1;x++){
  		button[x] = $('button'+x);
		content[x] = $('contentElement'+x);
		Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
  	}

button[1].addEvent('click', function(){
  if(content[1].getStyle('height').toInt() > 0){
 	 Toggle[1].start(0);
  }else{
     Toggle[1].start(c1Height);
  }
  return false;
});

Esto así tal cual funciona bien. Pero metido el addEvent dentro del FOR deja de funcionar:

Código:

for (x=1;x<lis.length+1;x++){
  	button[x] = $('button'+x);
	content[x] = $('contentElement'+x);
	Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});

        button[x].addEvent('click', function(){
              if(content[x].getStyle('height').toInt() > 0){
 	            Toggle[x].start(0);
              }else{
                    Toggle[x].start(c1Height);
              }
           return false;
       });
}

¿Cual es la diferencia?

[venkman]

Ver el código en el mensaje de más abajo.

[Luisfa]

Gracias de nuevo :)

Me parece que hay algo que estoy haciendo mal, pero de planteamiento.
Con este código:

Código:

   
         for (x=0;x<10;x++){
  		button[x] = $('button'+x);
		content[x] = $('contentElement'+x);
		Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
		
		button[x].addEvent('click', function(){
		var a = x;
		  if(content[a].getStyle('height').toInt() > 0){
			Toggle[a].start(0);//hide
		  }else{
			Toggle[a].start(height[a]);//show
		  }
		  return false;
		});
		
		content[x].setStyle('display','block');
		height[x] = content[x].getSize().scrollSize.y;
  	}

al hacer un Alert (a) me dice "10", pulsando cualquiera de los botones.
Yo lo que quería era asignarle a cada boton su función independiente, para actuar en sus respectivas capas, pero al meterla en el FOR supongo que estaré haciéndolo mal, no?

¿Tendría que sacarla de ahí? ¿Como le doy acada boton su funcion propia usando un bucle? (el numero de botones no es fijo, depende del numero de noticias, por eso necesito que sea dinamico y automatico)

[Luisfa]

Reduje el código y queda así:

Código:

for (x=0;x<10;x++){
  	button[x] = $('button'+x);
	content[x] = $('contentElement'+x);
	Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
}

button[1].addEvent('click', function(){
  if(content[1].getStyle('height').toInt() > 0){
 	 Toggle[1].start(0);
  }else{
     Toggle[1].start(content[1].getSize().scrollSize.y);
  }
  return false;
});

Es más, así también funciona:

Código:

  for (x=1;x<lis.length+1;x++){
  		button[x] = $('button'+x);
		content[x] = $('contentElement'+x);
		Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
  }

for(i=1;i<button.length;i++){
    if(content[i].getStyle('height').toInt() > 0){
         Toggle[i].start(0);
    }else{
         Toggle[i].start(content[i].getSize().scrollSize.y);
    }
}

Lo único que queda es aplicar esa función addEvent del botón a todos los botones del array Button. ¿Cómo podría hacer eso?

Gracias de antemano

[venkman]

WOa, perdona. Debía de estar dormido. Ignora lo de arriba. Una solución es esto:

Código javascript:

for (x=1;x<lis.length+1;x++){
          button[x] = $('button'+x);
          content[x] = $('contentElement'+x);
          Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
       
          button[x].addEvent('click', (function(a){
              return function() {
                  if(content[a].getStyle('height').toInt() > 0){
                      Toggle[a].start(0);
                  }else{
                      Toggle[a].start(c1Height);
                  }
                  return false;
              }
          })(x));
      }
 

Si lo prefieres, para que quede más fácil de entender. La solución puede quedar:

Código javascript:

function creaGestorEvento(a){
    return function() {
        if(content[a].getStyle('height').toInt() > 0){
            Toggle[a].start(0);
        }else{
            Toggle[a].start(c1Height);
        }
        return false;
    }
}
for (x=1;x<lis.length+1;x++){
    button[x] = $('button'+x);
    content[x] = $('contentElement'+x);
    Toggle[x] = new Fx.Style('contentElement'+x, 'height',{duration: 500});
    button[x].addEvent('click', creaGestorEvento(x));
}
 

[Luisfa]

1000 veces 1000 gracias Veckmar :D