使用 HTML 单选按钮和 javascript 进行评分答案

【问题标题】：Ratings using HTML radio buttons and javascript使用 HTML 单选按钮和 javascript 进行评分
【发布时间】：2013-05-25 00:23:50
【问题描述】：

我正在尝试更改 Magento 评论扩展的默认行为，以便它允许不投票，但前提是附加评论。我已经做了足够的研究以知道在哪里更改代码，并且我添加了一个“取消评级”功能，但它并没有完全按预期工作，我似乎无法弄清楚如何检查评级是否现在。

这是定义无线电的 HTML 部分。

<div class="right" id="ratings-right">
    <?php $countRatings = count($this->getRatings()); ?>
    <?php foreach ($this->getRatings() as $_rating): ?>
        <?php if ( $countRatings > 1 ): ?>
        <div class="rating-code" id="ratings-code[<?php echo $_rating->getRatingCode(); ?>]"</div>
        <?php endif; ?>
        <ul>
        <?php $sizeOptions = sizeof($_rating->getOptions()); $index=0; ?>
         <li class="value">
            <div class="rating-cancel"></div>
            <input type="radio" value="0" name="cancel[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>C<?php echo $_rating->getId() ?>" class="radio" /></li>
        <?php foreach ($_rating->getOptions() as $_option): $index++;?>
            <li class="value">
                <div class="separate-rating-star"></div>
                <input type="radio" <?php if ( $sizeOptions ==  $index ) :?><?php endif; ?>name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
            </li>
       <?php endforeach; ?>
        </ul>
    <?php endforeach; ?>
    <input type="hidden" name="validate_rating" class="validate-rating" value="" />
</div>

这里是发生验证和重置的 JavaScript 部分

Validation.addAllThese(
[
    ['validate-rating', '<?php echo $this->__('Please select a rating above OR write your Review below') ?>', function(v) {
        var ratingContainer = document.getElementById('ratings-right');
        var ratings = ratingContainer.getElementsByClassName('rating-code');
        var values;
        var star;
        var error = 1;
        window.console&&console.log("START");
        for (r=0;r < ratings.length; r++ ) {
            values = ratings.getElementsByClassName('value');
            stars = values.getElementsByTagName('radio');
            for (s=0; s < stars.length; s++ ) {
                console.log("Checking star %d.", s);
                if (stars[s].checked == true) {
                    error = 0;
                    window.console&&console.log("Radio %d is checked.\n", s);
                    }
                }
            var review = $('review_field').length;
            window.console&&console.log("Review size %d.", review);
            if ( review > 5 ) {
                error = 0;
                window.console&&console.log("Review size (%d) greater than 5.", review);
                }
            if( error != 0 ) {
                window.console&&console.log("Failed.\n");
                return false;
            } else {
                 window.console&&console.log("Passed.\n");
                 error = 1;
                 }
            }
        return true;
        }]
    ]
);
$(".overall-raiting ul li").click(
    function(){
        var tthis = this;
        var done = 0;
        var $li = $(tthis).parent().children('li');
        $li.removeClass('active');
        $li.each(function(){
            if( done < 1 ) $(this).addClass('active');
            if ( tthis == this ) done++;
            if( done != 1 ) $(this).prop('checked', false);
            })
        if ( done > 0 ) return false;
        $(this).find('input.radio').attr('checked',true);
        }
    );

尽管阅读了有关在 firefox 中使用 delete window['console']; 方法与 firebug 和 Chrome 的问题，但我无法让控制台始终报告值。但似乎我的 .onclick 功能正在将所有收音机更改为未选中，包括应该选中的收音机。据我所知，我没有在验证部分选择收音机，我尝试使用 .val() 和 .value 属性，但这段代码是我最近的尝试。

我想要的只是单击收音机以保持选中状态而所有其他未选中，并通过确定是否选中（包括取消）或 textarea 'review_field' 是否包含任何内容来进行验证。

我的最终答案如下。它比我的第一个解决方案更优雅，但我希望这对将来的人有所帮助。

【问题讨论】：

标签： php javascript jquery html magento

【解决方案1】：

根据你想做的事情

所有其他未选中并通过确定是否已选中（包括取消）或 textarea 'review_field' 是否包含任何内容来验证

此功能可能会有所帮助：

function isValidForm() {
   var numRadios = $('#ratings-right input:radio:checked').length,
       reviewContents = $('#review_field').val(),
       isValid = numRadios == 1 || reviewContents != '';

   return isValid;
}

【讨论】：

我刚刚尝试过验证，但在每次测试中都失败了。我什至删除了重置收音机的代码，并用萤火虫验证了收音机已检查，这仍然导致 isValid 为假。
我编辑了我的答案...我将“ratings-right”选择器作为一个类而不是 ID。另外，我不知道“review_field”是类还是 ID，所以您可能也需要更改它。
review_field 也是一个 ID，所以我有 #review_field 和 #ratings-right 但它仍然失败
是否可以发布 jsfiddle 或网站链接？我只能从您的示例中自己最小限度地复制页面，并且可能错过了页面上干扰我使用的 jQuery 选择器的重要 DOM 元素。或者您可以在 Firebug 中打破并观看 numRadios 和 reviewContents 以查看我的函数可能出错的地方。
我已使用您的回复以及其他研究来找到解决方案。看到 OP，我不确定我是否应该用这个回答我自己的问题......

【解决方案2】：

首先，我的 Javascript 日志记录问题已通过回答以下问题得到解决：JavaScript console log in Magento

jQuery(document).ready(function(){
   window.console = jQuery('<iframe>').hide().appendTo('body')[0].contentWindow.console;
});

这显然只有在你使用 jQuery 时才有效。

我的问题的其余部分已通过实施 bbird 代码的变体得到解决：

var rated = 0;
var ratingValue = $('#ratings-right input:radio:checked');
var reviewArea = $('#review_field');
var reviewContents = "";
for (i=0; i<reviewArea.length; i++) {
    reviewContents += reviewArea[i].value;
    }
for (i=0; i<ratingValue.length; i++) {
    if (ratingValue[i].value.length == 1 )
    rated = 1;
    }
console.log("%s", rated);
console.log("%s", reviewContents);
var isValid = rated > 0 || reviewContents != '';
console.log("%s", isValid);
return isValid;

至于单选按钮本身，在 Magento 的数据库中，我添加了一个零星值，其 optionId 为 99999。这个评级首先显示在评级选项中，在控制器中，我检查了一个小于 9999 的值. 这样可以确保不会将零星评级计算到聚合中。

这还允许所有单选按钮具有相同的类和名称，因此不再需要以编程方式取消选中任何内容。单选按钮的默认行为是只允许选中同名组中的一个单选。

现在是单选按钮的实现：

<div <?php if ($_option->getValue() == "0" ) echo "class=\"rating-cancel\""; else echo "class=\"separate-rating-star\"" ?>></div>
<input type="radio" <?php if ( $sizeOptions ==  $index ) :?><?php endif; ?>name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />

这样，第一个值为 0 的选项可以通过 css 样式化为某种取消按钮，其余的将是星号。

【讨论】：