Question

我有一个简单的功能，我试图按组附加结果。我已经能够显示单个表单的结果，但不确定从何处继续。这是Jsfiddle的功能。 http://jsfiddle.net/XBSVn/

Answer 1

试试这个。请注意，您的类名之间存在差异，并且您的选择器仅选择第一个输入元素：

$(function() {
    $('.ratingroups input').each(function(i, v) {
        var star = '&#9733';
        var val = parseInt(this.value, 10)  
        for (var i = 0; i < val; i++) {
           $(this).parent().siblings('div').append($('<div>').html(star).text())        
        }
    });
});

DEMO

Answer 2

这里的问题是类名选择器中的拼写错误（你使用了.ratinggroups和.ratingroups）以及文本框选择器（你总是得到第一个检查值的文本框）。

检查此更新的JsFiddle：http://jsfiddle.net/XBSVn/12/

将您的HTML更改为：

<form class="ratingroups">
    <p><input class="asstars" value="5"/> </p>
    <div class="rstars"></div>
</form>
<form class="ratingroups">
    <p><input class="asstars" value="4"/> </p>
    <div class="rstars"></div>
</form>
<form class="ratingroups">
    <p><input class="asstars" value="3"/> </p>
    <div class="rstars"></div>
</form>
<form class="ratingroups">
    <p><input class="asstars" value="2"/> </p>
    <div class="rstars"></div>
</form>
<form class="ratingroups">
    <p><input class="asstars" value="1"/> </p>
    <div class="rstars"></div>
</form>

和你的Javascript：

$(function() {
    console.log($('.ratingroups input').length);
    $('.ratingroups input').each(function() {
        var asstars = $(this);
        var stars = asstars.closest('.ratingroups').find('.rstars');
        var display = true;
        if (asstars.val() == '5') {
            stars.append('<span>&#9733;&#9733;&#9733;&#9733;&#9733;</span>');
            display = false;
        }
        else if (asstars.val() == '4') {
            stars.append('<span>&#9733;&#9733;&#9733;&#9733;</span>');
            display = false;
        }
        else if (asstars.val() == '3') {
            stars.append('<span>&#9733;&#9733;&#9733;</span>');
            display = false;
        }
        else if (asstars.val() == '2') {
            stars.append('<span>&#9733;&#9733;</span>');
            display = false;
        }
        else if (asstars.val() == '1') {
            stars.append('<span>&#9733;</span>');
            display = false;
        }
        if (display) {
            stars.css('display', 'none');
        }
        else {
            stars.css('display', 'block');
        }
    });
});

按组附加结果

2 个答案: