将单选按钮转换为星级

时间:2017-07-19 00:09:25

标签: javascript jquery html

我有一些单选按钮列表,我尝试将其转换为此示例中的星级评分http://plugins.krajee.com/star-rating-demo-basic-usage

我已经加载了所有依赖项并将我的代码配置为示例,但我没有运气,将这些单选按钮转换为星级评级的任何帮助都将不胜感激!

<ul>
<li>
<div>
<div>Overall how was your experience?</div>
</div>
<div>
<div><input name="feedback_radio" type="radio" value="1" /> <label 
for="feedback_radio_1">1</label></div>
<div><input name="feedback_radio" type="radio" value="2" /> <label 
for="feedback_radio_2">2</label></div>
<div><input name="feedback_radio" type="radio" value="3" /> <label 
for="feedback_radio_3">3</label></div>
<div><input name="feedback_radio" type="radio" value="4" /> <label 
for="feedback_radio_4">4</label></div>
<div><input name="feedback_radio" type="radio" value="5" /> <label 
for="feedback_radio_5">5</label></div>
</div>
</li>
</ul>
这是我的小提琴 https://jsfiddle.net/fn7rxums/

2 个答案:

答案 0 :(得分:1)

如果您想使用该插件来实施星级评分,请按照其使用情况进行操作。您需要覆盖更多依赖项。 http://plugins.krajee.com/star-rating#usage

答案 1 :(得分:0)

您需要将输入的类别设置为“rating”

Automatically convert any input to a bootstrap star rating control by setting 
its class as rating. Note that the CSS class rating-loading when added, hides 
the input when the page is loading, and shows a plugin loading indicator until 
the widget is entirely loaded

直接从您关联的网站上获取。

<label for="feedback_radio_1">1</label>
<input name="feedback_radio" type="radio" value="1" class="rating" data-min="0" data-max="5" data-step="1"/> 

确保已安装并正确包含文件。