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