Optimizando código con fors y OOP

[Urdaris_Nox]

¡Buenas a todos!

Veamos, estoy haciendo un registro de usuarios en el que pongo, a cada atributo, una imagen para editar a éste.

Simplificando el tema;

Código PHP:

  <div class="atributoTexto" id="nombre"> 
 NombreUsuario 
</div> 
<div class="disparadorEdicion" id="disparadorNombre"> 
</div>  
   

Script Javascript (con Jquery);

Código PHP:

  $('#disparadorNombre').click (function () { 
//codigo 
});  
   

Hasta aquí todo bien. El problema es que tengo como 10 atributos y escribir todo el código Javascript para cada uno, es FEO.

Estaba intentando hacer esto con un bucle, pero veo que no funciona;

Código PHP:

  var disparadorA = $('#disparadorA'); 
var disparadorB = $('#disparadorB'); 
var disparadorC = $('#disparadorC'); 
 
var disparadores = new Array (disparadorA, disparadorB, disparadorC); 
 
for (var i=0; i<disparadores.length; i++){ 
    disparadores[i].click (function () { 
        alert(disparadores[i].css("background-position")); 
    }); 
}  
   

Lo del CSS es un ejemplo, el tema es que no funciona.

Estuve investigando un poquito y parece que con Javacript orientado a objetos se podría hacer, pero me resulta confuso.

¿Cómo podría hacer esto con un bucle? Y ¿alguien sabe de un tutorial de Javascript OOP que ataque este tipo de asuntos?

Gracias!

[_cronos2]

Si todos siguen la misma estructura puedes hacer esto:

Código Javascript:

var nombres = ['A', 'B', 'C'];
$( nombres.map(function(id){ return '#disparador' + id; }).join() ).click(func);
 

Y dentro de func usas $(this) para hacer referencia al elemento.
Pero yo creo que es más sencillo asignarle una clase a todos los elementos, y hacer algo como $('.clase')
Saludos (:

[Urdaris_Nox]

No sabía que se podía utilizar JQuery para algo así. Me ha ido genial, ahorrando como unas 50 lineas de código.

Explico un poco por si a alguien le sirve;
Hay una página con inputs, y cada Input tiene una imagen de cuatro partes;
Parte superior Izquierda muestra boton sin pulsar, y sin estar encima.
Parte superior Derecha muestra botón sin pulsar, pero estando encima.
Parte inferior Izquierda muestra botón pulsado, sin estar encima.
Parte inferior Derecha muestra botón pulsado, al pasar por encima.

A mí me ha quedado esto:

Código PHP:

          var disparadores = $('.atributoDisparador'); 
        //Evento Mouseenter         
        disparadores.mouseenter (function () { 
            if( ($(this).backgroundPosition()=="left top") || ($(this).backgroundPosition()=="right top") ){        //Top 
                //Si está en Top, el efecto hover muestra top right 
                $(this).css("background-position","top right"); 
            } else if( ($(this).backgroundPosition()=="left bottom") || ($(this).backgroundPosition()=="right bottom") ){        //Bottom 
                //Si está en Bottom, el efecto hover muestra bottom right 
                $(this).css("background-position","bottom right"); 
            } 
        });         
        //Evento Mouseleave         
        disparadores.mouseleave(function () { 
            if( ($(this).backgroundPosition()=="left top") || ($(this).backgroundPosition()=="right top") ){        //Top 
                //Si está en Top, el efecto hover muestra top left 
                $(this).css("background-position","top left"); 
            } else if( ($(this).backgroundPosition()=="left bottom") || ($(this).backgroundPosition()=="right bottom") ){        //Bottom 
                //Si está en Bottom, el efecto hover muestra bottom left 
                $(this).css("background-position","bottom left"); 
            } 
        });  
   

Es importante considerar que uso una función especial para sacar el background-position:

Código PHP:

  jQuery.fn.backgroundPosition = function() { 
    var p = $(this).css('background-position'); 
    //IE 
    if(typeof(p) === 'undefined'){ 
        return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y'); 
    }else{ 
    //Otros 
        if (p == "0% 0%"){ 
            return "left top"; 
        } else if (p == "100% 0%"){ 
            return "right top"; 
        } else if (p == "0% 100%"){ 
            return "left bottom"; 
        } else if (p == "100% 100%"){ 
            return "right bottom"; 
        } 
    } 
  };  
   

La modifiqué de la página http://dextrose.be/2008/11/10/jquery...ernet-explorer.
Es útil porque la función ofrecida por jQuery no es compatible con Explorer.



Ahora tengo una duda, a ver si alguien me puede echar un cable:
Al hacer click a la imagen-disparador, antes tenía puesto que hiciera un "Bind" al input relacionado, para que hiciera una lectura de "Enter", para hacer un submit artificial.

El problema es que al simplificar las cosas con esto, no sé qué input le toca.

¿Cómo podría hacerlo para que, al hacer click al disparador, se hiciera un bind al input relacionado?