Добавить или удалить класс с прототипом

Не могу понять сценарий PROTOTYPE для добавления или удаления имени класса css, «выбранного» для элемента img, основанного на функции щелчка (уже сделано для Jquery...), но он должен быть в прототипе. И это сводит меня с ума. Не могу заставить его работать для прототипа....

Мой исходный код (магазин 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; ?>

Для JQuery.

Не могли бы вы преобразовать для 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>

class magento prototype prototypejs removeclass
person SilverStoreS    schedule 10.11.2012    source источник
comment
Покажите нам, что у вас есть в jQuery, и мы конвертируем это в Protoype.   -  person glortho    schedule 10.11.2012
comment
Добавил к вопросу мой исходный код для Jquery. Хотите прототип, пожалуйста.   -  person SilverStoreS    schedule 10.11.2012
comment
Попробуйте этот пример: tutorialspoint.com/prototype/prototype_element_addclassname.htm   -  person Alex    schedule 10.11.2012

Ответы (1)


arrow_upward
11
arrow_downward

Прототип этого обработчика кликов (непроверенный):

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

Изменить: изменено на toggleClassName по предложению @Victor. +7 баллов ему и от each до invoke благодаря @Geek Num. +7 очков ему и 1 осталось мне.

person glortho    schedule 11.11.2012
comment
Существует метод toggleClassName(), который добавит/удалит имя класса для вас api.prototypejs.org/ дом/Элемент/прототип/toggleClassName - person Victor; 11.11.2012
comment
для этой строки $$('.chooser').each(function(i) { i.removeClassName('selected') }); следует использовать метод invoke(). Это чище, чем использование каждого, если вы собираетесь вызывать одну функцию. $$('.chooser').invoke("removeClassName","selected"); api.prototypejs.org/language/Enumerable/prototype/invoke - person Geek Num 88; 11.11.2012
comment
Несколько хороших примеров terriswallow.com/weblog/ 2007/ - person jazkat; 18.02.2014