按組添加結果

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