用原型添加或删除类 [英] Add or remove class with prototype

问题描述

无法将PROTOTYPE脚本添加或删除css类名称选择到img元素基于点击功能（已经为Jquery ...），但它必须在Prototype。它驱使我疯了。

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....

我的原始代码是（Magento店）

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; ?>

适用于Jquery。

for Prototype 1.7 ...？

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>

推荐答案

点击处理程序的原型版本/ p>

Prototype version of that click handler (untested):

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

编辑：更改为 toggleClassName 维克多的建议。 +7分给他，从每个到调用感谢@Geek Num。 +7分给他，1分留给我。

Changed to toggleClassName as per @Victor's suggestion. +7 points for him, and from each to invoke thanks to @Geek Num. +7 points for him and 1 left over for me.

这篇关于用原型添加或删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！