Ajouter ou supprimer de la classe avec le prototype

Ne peux pas comprendre le PROTOTYPE de script pour ajouter ou de retirer un nom de classe css "sélectionnés" pour img, élément de base en fonction de clic (déjà fait pour Jquery...), mais il doit être à l'état de Prototype. Et sa me rend fou. Ne peux pas faire ce travail pour le prototype....

Mon code d'origine est (boutique Magento)

<div class="block block-poll">
<div class="block-title">
<strong><span><?php echo $this->__('Community Poll') ?></span></strong>
</div>
<form id="pollForm" action="<?php echo $action ?>" method="post" onsubmit="return validatePollAnswerIsSelected();">
<div class="block-content">
<p class="block-subtitle"><?php echo $this->htmlEscape($poll->getPollTitle()); ?></p>
<?php if( $poll_answers ): ?>
<ul id="poll-answers">
<?php foreach( $poll_answers as $answer ): ?>
<li>
<input type="radio" name="vote" style ="display:none;" class="radio poll_vote" id="vote_<?php echo $answer->getId() ?>" value="<?php echo $answer->getAnswerId() ?>" />
<?php
$stripped = $answer->getAnswerTitle();
$stripped_final = str_replace(" ", "_", strtolower($stripped)); //Value (simplified)
?>
<span class="label"><label for="vote_<?php echo $answer->getId() ?>"><img src="http://www.passione.pt/media/poll/<?php echo $stripped_final; ?>.png" id="chooser" class="chooser" alt="<?php echo $this->htmlEscape($answer->getAnswerTitle()) ?>" onClick="document.getElementById('vote_<?php echo $answer->getId() ?>').checked =true;"/></label></span>         
</li>
<?php endforeach; ?>
</ul>
<script type="text/javascript">decorateList('poll-answers');</script>
<?php endif; ?>
<div class="actions">
<button type="submit" title="<?php echo $this->__('Vote') ?>" class="button"><span><span><?php echo $this->__('Vote') ?></span></span></button>
</div>
</div>
</form>
</div>
<?php endif; ?>

Pour Jquery.

Pourrait vous transformer pour Prototype 1.7...?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
var Chooser = $('#poll-answers img');
Chooser.click(function() {
$('.chooser').removeClass('selected');
if(!Chooser.hasClass('selected')) {
$(this).addClass('selected');        
} else {
$(this).removeClass('selected');
}
});
</script>
Montrez-nous ce que vous avez en jQuery et nous allons le convertir en Protoype.
Ajouté à la question de mon code d'origine pour Jquery. Voulez pour prototype, s'il vous plaît.
Essayez cet exemple: tutorialspoint.com/prototype/prototype_element_addclassname.htm

OriginalL'auteur Buno Gaiteiro | 2012-11-10

  1. 10

    Prototype version de ce gestionnaire de clic (non testé):

    $('poll-answers').on('click', 'img', function(event, element) {
$$('.chooser').invoke('removeClassName', 'selected');
element.toggleClassName('selected');
});

    Edit: Changé pour toggleClassName comme par @Victor, de la suggestion. +7 points pour lui, et de each à invoke grâce à @Geek Num. +7 points pour lui et 1 reste pour moi.

    Il a travaillé.... Merci beaucoup glortho. De moins en moins un problème. thx
    Il est toggleClassName() méthode permettant d'ajouter/supprimer un nom de classe pour vous api.prototypejs.org/dom/Element/prototype/toggleClassName
    encore merci à victor et glortho
    pour cette ligne $$('.chooser').each(function(i) { i.removeClassName('selected') }); vous devez utiliser le invoke() méthode. Son plus propre que l'utilisation de chaque si vous allez à l'appel d'une fonction. $$('.chooser').invoke("removeClassName","selected"); api.prototypejs.org/language/Enumerable/prototype/invoke
    Quelques bons exemples terriswallow.com/weblog/2007/...

    OriginalL'auteur glortho