[英]jQuery Multiple Star Rating system using Select Option dropdown
我找到了我想使用的这个简单的jQuery Star评分系统,我在网站上遵循http://jsfiddle.net/代码,它对于一个星级评分系统(而不是多个星级评分)可以正常工作,并且我拥有多个星级评分系统在我网站的一页上。
这是jsfiddle链接: http : //jsfiddle.net/IrvinDominin/eeG86/
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
在上面的链接中,我喜欢jQuery下拉菜单,但这仅适用于一页上的一个评分系统。 我的问题是我在一页上有多个星级评定系统。
您的第一个问题是使用ID的事实,让我们将每个select
的标记更改为使用类:
<select name="my_input" class="rating_simple">
现在我们需要更新您的jQuery以反映更改(使用.
而不是#
)。
最后 ,在您的change
方法中,您使用$(".webwidget_rating_simple")
来指星级评级系统,但是现在DOM中有多个,因此我们需要引用与您当前select
相邻的一个重新更改,使用$(this).next(".webwidget_rating_simple")
。
所以最后,您的jQuery将如下所示:
编辑我们实际上实际上需要分别设置每个下拉菜单,这是为了防止如果单击一个星号,则插件中的问题会选择所有下拉菜单(最好更改调用代码而不是更新插件)。
$(".rating_simple").each(function () {
$(this).webwidget_rating_simple({
rating_star_length: '5',
rating_initial_value: '',
rating_function_name: ''
});
});
$('.rating_simple').change(function () {
$(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
$(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});
尝试这个。 使用不同的ID和名称。
<select name="my_input1" id="rating_simple1"> <option value="0" selected="selected">---Select---</option> <option value="1">Poor</option> <option value="2">Below Average</option> <option value="3">Average</option> <option value="4">Good</option> <option value="5">Excellent</option> </select> <select name="my_input2" id="rating_simple2"> <option value="0" selected="selected">---Select---</option> <option value="1">Poor</option> <option value="2">Below Average</option> <option value="3">Average</option> <option value="4">Good</option> <option value="5">Excellent</option> </select> <select name="my_input2" id="rating_simple2"> <option value="0" selected="selected">---Select---</option> <option value="1">Poor</option> <option value="2">Below Average</option> <option value="3">Average</option> <option value="4">Good</option> <option value="5">Excellent</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.