Kürzen Sie den Code für eine Vielzahl von Tasten in Prototype

Question

Ich habe eine Menge von Tasten und durch auf verschiedene Schaltfläche klicken, anderes Bild und Text erscheinen. Ich kann das erreichen, was ich will, aber der Code ist nur so lange, und es scheint sehr eintönig. Zum Beispiel:

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

Gleiche mit bb, cc, usw. und jedes Mal, wenn ich eine neue Schaltfläche hinzufügen, muss ich es hinzufügen Funktion als auch auf unclick. Das ist ziemlich ärgerlich, und ich versuchte, es zu Google, und ich fand nur einen Klick auf allen aufgeführten Punkten beachten, so kann ich noch nicht herausfinden, da das, was ich will Taste nach oben geht, wenn andere Tasten angeklickt werden.

Gibt es eine Möglichkeit, nur eine generische Funktion hat, die unterschiedliche id nimmt aber genau die gleiche Sache zu tun? Denn von dem, was ich sehe, wenn ich nur aa mit anderer ID ersetzen kann, kann ich eine Menge Code reduzieren. Dank !!!

Answer 1

alles in eine Funktion bauen, in dem Sie einfach die Namen der DIVs passieren können Sie registrieren möchten. Wie lange sind Sie mit Ihrem Namen .jpg konsistent sind, sollte es funktionieren.

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

Event-Delegation. Geben Sie alle Ihre Tasten eine Klasse (zB yourButtonClass), dann ...

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

Und so weiter ...

Answer 3

Die Ereignishandler kann ein Argument haben, das auf das Ereignis Ziel gesetzt wird. Dann könnten Sie die gleiche Funktion wieder verwenden:

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

Sie sind auch dringend zu CSS Styling. Sehen Sie bitte meine zu Ihrer vorherigen Frage beantworten, aber Sie könnten nur das Muster für die anderen Ereignisse wiederverwendet werden.

Answer 4

Sind die Tasten, um einen gemeinsamen Behälter teilen? Dann wird der folgende Code funktioniert:

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

Alternativ können Sie auch dies tun:

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