Acorte el código para muchos botones en Prototype

Question

Tengo muchos botones y al hacer clic en un botón diferente, aparecerían diferentes imágenes y texto. Puedo lograr lo que quiero, pero el código es tan largo y parece muy repetitivo. Por ejemplo:

   var aaClick = false;
    $("aa").observe('click', function() {
        unclick();
        $('characterPic').writeAttribute('src',"aa.jpg");
        $('characterBio').update("aatext");
        $('aa').setStyle({ color: '#FFFFFF' });
        aaClick = true;
    });

    $("aa").observe('mouseover', function() {
        if (!aaClick) $('aa').setStyle({ color: '#FFFFFF' });
    });

    $("aa").observe('mouseout', function() {
        if (!aaClick) $('aa').setStyle({ color: '#666666' });
    });

    function unclick() {
         aaClick = false;
         $('aa').setStyle({ color: '#666666' });
    }

lo mismo con bb, cc, etc. y cada vez que agrego un nuevo botón, también necesito agregarlo para desmarcar la función. Esto es bastante molesto y traté de buscarlo en Google, y solo encontré un clic en todos los elementos enumerados, por lo que todavía no podía entenderlo, ya que lo que quiero implica abotonar cuando se hacen clic en otros botones.

¿Hay alguna manera de tener una función genérica que tome una identificación diferente pero haga exactamente lo mismo? Porque por lo que puedo ver, si solo puedo reemplazar aa con otra identificación, puedo reducir mucho código. Gracias !!!

Answer 1

Conviértalo todo en una función en la que simplemente pueda pasarle los nombres de los DIV que desea registrar. Mientras sea coherente con sus nombres .jpg, debería funcionar.

var clicks = []
function regEvents(divName) {
    $(divName).observe('click', function() {
        unclick(divName);
        $('characterPic').writeAttribute('src',divName+".jpg");
        $('characterBio').update(divName"text");
        $(divName).setStyle({ color: '#FFFFFF' });
        clicks[divName] = true

    });

    $(divName).observe('mouseover', function() {
        if (!clicks[divName]) $(divName).setStyle({ color: '#FFFFFF' });
    });

    $(divName).observe('mouseout', function() {
        if (!clicks[divName]) $(divName).setStyle({ color: '#666666' });
    });
}
function unclick(divName) {
     clicks[divName] = false;
     $(clicks[divName]).setStyle({ color: '#666666' });
}

Answer 2

Delegación de eventos. Asigne una clase a todos sus botones (por ejemplo, yourButtonClass ), luego ...

var clicks = [];
$('.yourButtonClass').each(function(button) {
    clicks.push(button.id);
});
$(document).observe('click', function(e) {
    // If your click registered on an element contained by the button, this comes in handy...
    var clicked = e.element().up('.yourButtonClass') || e.element();

    if(clicked.hasClassName('.yourButtonClass')) {
        unclick();
        $('characterPic').writeAttribute('src', clicked.id + '.jpg');
        $('characterBio').update(clicked.id + 'text');
        $(clicked).setStyle({ color: '#FFFFFF' });
        clicks[clicked.id] = true;
    }
});

Y así sucesivamente ...

Answer 3

Los controladores de eventos pueden tener un argumento que se establecerá en el destino del evento. Entonces podría reutilizar la misma función:

var clickedHandler = function(element) { 
  $(element).addClass("selected");
};
$("aa").observe('click', clickedHandler);
$("bb").observe('click', clickedHandler);

También necesitas desesperadamente el estilo CSS. Consulte mi respuesta a su pregunta anterior, pero simplemente podría reutilizar el patrón para los otros eventos.

Answer 4

¿Los botones comparten un contenedor común? Entonces el siguiente código funciona:

$(container).childElements().each(function(element) {
    $(element).observe('click', function () { … });
    …
});

Alternativamente, también puede hacer esto:

["aa", "bb", "cc"].each(function(element) { … same code … });