javascript - 如何在页面上获得一组以上的评分

我正在使用简单的星级评分器，并且必须设置一组评分-http://codepen.io/anon/pen/WvOevd

  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>
<br>
<span class="star-rating">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>

如您所见，单击一组将更改/影响另一组收视率。我应该怎么做才能拥有两个功能集？

最佳答案

Here is your exemple working

这是因为他们都使用相同的组（评分）

尝试将第二组更改为类似以下内容：

<span class="star-rating">
  <input type="radio" name="otherGroupName" value="1"><i></i>
  <input type="radio" name="otherGroupName" value="2"><i></i>
  <input type="radio" name="otherGroupName" value="3"><i></i>
  <input type="radio" name="otherGroupName" value="4"><i></i>
  <input type="radio" name="otherGroupName" value="5"><i></i>
</span>
//I also changed your class here to have a unique one
<strong class="choiceOtherGroupName">Choose a rating</strong>

我也将您的js更改为：

$(':radio').change(
  function(){
    if (this.name === "rating")
      $('.choiceRating').text( this.value + ' stars' );
    else if(this.name === "otherGroupName")
      $('.choiceOtherGroupName').text( this.value + ' stars' );
  }
)

此代码将检查您的单选按钮组以定位正确的标签！如果来自组等级，则将输出到choiceRating，如果来自第二组（choiceOtherGroupName），则将输出到第二标签！

关于javascript - 如何在页面上获得一组以上的评分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30742703/