按组添加结果

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