Raccourcissez le code pour beaucoup de boutons dans Prototype

Question

J'ai beaucoup de boutons et en cliquant sur un bouton différent, une image et un texte différents apparaissent. Je peux réaliser ce que je veux, mais le code est trop long et semble très répétitif. Par exemple:

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

même chose avec bb, cc, etc. et chaque fois que j’ajoute un nouveau bouton, j’ai besoin de l’ajouter également à la fonction de déclic. C’est assez gênant et j’ai essayé de le rechercher sur Google, et je n’ai trouvé qu’observer de cliquer sur tous les éléments de la liste. Je ne pouvais donc toujours pas comprendre puisque ce que je veux implique un bouton lorsque l’on clique sur les autres boutons.

Existe-t-il un moyen d'avoir simplement une fonction générique prenant un identifiant différent tout en faisant exactement la même chose? D'après ce que je peux voir, si je peux simplement remplacer un aa par un autre identifiant, je peux réduire beaucoup de code. Merci !!!

Answer 1

Créez tout cela dans une fonction où vous pourrez simplement lui transmettre le nom des DIV que vous souhaitez enregistrer. Tant que vous êtes cohérent avec vos noms .jpg, cela devrait fonctionner.

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

Délégation d'événement. Attribuez une classe à tous vos boutons (par exemple, votreButtonClass ), puis ...

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

Et ainsi de suite ...

Answer 3

Les gestionnaires d'événements peuvent avoir un argument qui sera défini sur la cible de l'événement. Ensuite, vous pouvez réutiliser la même fonction:

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

Vous avez également désespérément besoin de styles CSS. Veuillez vous reporter à ma réponse à votre question précédente, mais vous pouvez simplement réutiliser le modèle pour les autres événements.

Answer 4

Les boutons partagent-ils un conteneur commun? Ensuite, le code suivant fonctionne:

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

Vous pouvez également effectuer cette opération:

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