我正在研究星级。我在Codepen重用了Olga的代码。我想动态显示用户选择的比率,例如:“您给此产品的价格为:3/5”。
我从JS和jQuery开始,所以我的想法受到限制;我只是为了测试而尝试过,但没有显示任何内容
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
</head>
<div class="row">
<fieldset class="rate">
<input class="rate2-star5" type="radio" name="rate2" value="5" />
<label for="rate2-star5" title="Awesome">5</label>
<input class="rate2-star4" type="radio" name="rate2" value="4" />
<label for="rate2-star4" title="Very good">4</label>
</fieldset>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
UIbezierpath
这就是我想要的结果:https://imgur.com/a/07X9qgP
答案 0 :(得分:1)
使用以下jquery示例,我认为它将为您提供帮助。
$(document).on('change', '.rate2-star5', function() {
var el = $(this);
var is_checked = el.is(':checked');
alert(is_checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="row">
<fieldset class="rate">
<input class="rate2-star5" type="checkbox" name="rate2" value="5" />
<label for="rate2-star5" title="Awesome">5</label>
</fieldset>
</div>
答案 1 :(得分:0)
您可以使用以下片段,这些片段基本上是从原始jQuery代码派生的:
$("input[type='radio']").click(function() {
if ($(this).is(':checked')) {
alert($(this).val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<fieldset class="rate">
<input class="rate2-star5" type="radio" name="rate2" value="5" />
<label for="rate2-star5" title="Awesome">5</label>
<input class="rate2-star4" type="radio" name="rate2" value="4" />
<label for="rate2-star4" title="Very good">4</label>
</fieldset>
</div>
说明:
您需要在单击或更改单选按钮时触发此代码,然后只有您会看到警报。