Encurtar o código para um monte de botões em Prototype

Question

Eu tenho um monte de botões e clicando no botão diferente, diferente de imagem e texto iria aparecer. Eu posso conseguir o que eu quero, mas o código é tão longa e parece muito repetitivo. Por exemplo:

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

mesma coisa com bb, cc, etc, e cada vez que eu adicionar um novo botão, eu preciso adicioná-lo à função desmarque também. Isso é muito chato e eu tentei google-lo, e eu só encontrei observar clique em todos os itens listados, então eu ainda não consegui descobrir uma vez que eu quero botão envolve-se quando outros botões são clicados.

Existe alguma maneira de ter apenas uma função genérica que leva diferente id mas fazer exatamente a mesma coisa? Por causa do que eu posso ver, se eu só posso substituir aa com outro ID, posso reduzir um monte de código. Thanks !!!

Answer 1

Construir tudo em uma função onde você pode simplesmente passar os nomes dos DIVs que pretende registar. Contanto que você está são consistentes com seus nomes .jpg, ele deve 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

Delegação

Event. Dê todos os seus botões de uma classe (por exemplo yourButtonClass), então ...

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 assim por diante ...

Answer 3

Os manipuladores de eventos pode ter um argumento que será definido para o destino do evento. Então você pode reutilizar a mesma função:

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

Você também está na necessidade desesperada de estilo CSS. Por favor, veja o meu resposta à sua pergunta anterior, mas você poderia simplesmente reutilizar o padrão para os outros eventos.

Answer 4

Será que os botões de compartilhar um recipiente comum? Então o seguinte código funciona:

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

Como alternativa, você também pode fazer isso:

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