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）它将输出到第二个标签！

如何在页面上设置多组评分

1 个答案: