Riduci il codice per molti pulsanti in Prototype

Question

Ho molti pulsanti e facendo clic su un pulsante diverso, appariranno immagini e testi diversi. Posso ottenere quello che voglio, ma il codice è così lungo e sembra molto ripetitivo. Ad esempio:

   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' });
    }

stessa cosa con bb, cc, ecc. e ogni volta che aggiungo un nuovo pulsante, devo aggiungerlo anche alla funzione Unlick. Questo è piuttosto fastidioso e ho provato a cercarlo su Google, e ho trovato solo il clic sull'osservazione su tutti gli elementi elencati, quindi non riuscivo ancora a capire dal momento che quello che voglio riguarda il pulsante su quando si fa clic su altri pulsanti.

Esiste un modo per avere solo una funzione generica che accetta ID diversi ma fa esattamente la stessa cosa? Perché da quello che posso vedere, se posso semplicemente sostituire aa con un altro ID, posso ridurre un sacco di codice. Grazie !!!

Answer 1

Crea tutto in una funzione in cui puoi semplicemente passargli i nomi dei DIV che vuoi registrare. Finché sei coerente con i tuoi nomi .jpg, dovrebbe funzionare.

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

Delega degli eventi. Dai una classe a tutti i tuoi pulsanti (ad es. yourButtonClass ), quindi ...

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;
    }
});

E così via ...

Answer 3

I gestori di eventi possono avere un argomento che verrà impostato sulla destinazione dell'evento. Quindi è possibile riutilizzare la stessa funzione:

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

Hai anche un disperato bisogno di stile CSS. Consulta la mia rispondi alla tua domanda precedente, ma potresti semplicemente riutilizzare il modello per gli altri eventi.

Answer 4

I pulsanti condividono un contenitore comune? Quindi funziona il seguente codice:

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

In alternativa, puoi anche farlo:

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