javascript - 按组追加结果

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())        
        }
    });
});

演示

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');
        }
    });
});