javascript - 如何在页面上拥有多组评分

Question

我正在使用简单的星级评定器，并且必须设置评级 - 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>

如您所见，通过单击一组，它将更改/影响另一组评级。我应该怎样做才能拥有两个功能集？

Answer 1

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)，则会输出到第二个标签!