jQuery rateYo 插件可以在评分星点击后继续评分吗?
jQuery rateYo plugin that continue rating after rated star click?
我试过了,但我没有解决关于名为 rateYo
.
的完美 jquery 插件的问题
我在这个页面准备了一个样本:
$(".rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">
如果您单击任何星星,假设您单击第 2 行中的第 3 颗星,当您将鼠标从第 1 颗移到第 5 颗时,它会将所有三行都固定为第 3 颗星。
我想实现所有三行都固定为最后一个选择。
我该如何解决这个问题?
单独设置插件似乎可行
$(".rateYo").each(function (e) {
$(this).rateYo({
onSet: function (rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
});
$(".rateYo").each(function(e) {
$(this).rateYo({
onSet: function(rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">
使用属性。 只读:真
我试过了,但我没有解决关于名为 rateYo
.
我在这个页面准备了一个样本:
$(".rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">
如果您单击任何星星,假设您单击第 2 行中的第 3 颗星,当您将鼠标从第 1 颗移到第 5 颗时,它会将所有三行都固定为第 3 颗星。
我想实现所有三行都固定为最后一个选择。
我该如何解决这个问题?
单独设置插件似乎可行
$(".rateYo").each(function (e) {
$(this).rateYo({
onSet: function (rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
});
$(".rateYo").each(function(e) {
$(this).rateYo({
onSet: function(rating, rateYoInstance) {
$(this).next().val(rating);
},
rating: 0,
starWidth: "20px",
numStars: 5,
fullStar: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">
使用属性。 只读:真