Cant figure the PROTOTYPE script for adding or removing a the css class name "selected" to img element based in click function (already done for Jquery...) but it must be in Prototype. And its driving me crazy. Cant make it work for prototype....
My original code is (Magento store)
<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; ?>
For Jquery.
Could you transform for 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>
Prototype version of that click handler (untested):
Edit: Changed to
toggleClassName
as per @Victor's suggestion. +7 points for him, and fromeach
toinvoke
thanks to @Geek Num. +7 points for him and 1 left over for me.