我正在使用简单的星级评定器,并且必须设置评级 - 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>
如您所见,通过单击一组,它将更改/影响另一组评级。我应该怎样做才能拥有两个功能集?
最佳答案
这是因为他们都使用相同的组(评级)
尝试将第二组更改为其他类似的内容:
<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/