Raccourcir le code pour beaucoup de boutons dans le prototype

Question

J'ai beaucoup de boutons et en cliquant sur le bouton différent, l'image différente et le texte apparaîtraient. Je peux réaliser ce que je veux, mais le code est tellement long et il 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'ajouter un nouveau bouton, je dois l'ajouter à décocher la fonction aussi bien. C'est assez énervant et j'ai essayé de le google, et j'ai seulement trouvé observer observer sur tous les articles énumérés, ainsi je ne pourrais toujours pas comprendre puisque ce que je veux implique le bouton vers le haut quand d'autres boutons sont cliqués.

Existe-t-il un moyen de simplement avoir une fonction générique qui prend un ID différent mais qui fait exactement la même chose? Parce que d'après ce que je peux voir, si je peux juste remplacer aa avec un autre id, je peux réduire beaucoup de code. Merci!!!

Answer 1

Construire tout en une fonction où vous pouvez simplement transmettre les noms des DIVs que vous souhaitez enregistrer. Tant que vous êtes compatible 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

Est-ce que les boutons partagent un même conteneur? Ensuite, le code suivant fonctionne:

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

Vous pouvez aussi le faire:

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

Answer 3

Les gestionnaires d'événements peuvent avoir un argument qui sera défini sur la cible d'événement. Alors vous pourriez 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 d'un style CSS. S'il vous plaît voir mon answer à votre question précédente, mais vous pourriez simplement réutiliser le modèle pour les autres événements.

Answer 4

Délégation d'événements. Donner à tous vos boutons une classe (par exemple yourButtonClass), 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 ...