评分 / Rating
优质
小牛编辑
129浏览
2023-12-01
当鼠标移动到星星上时,星星会暂时地指向鼠标所在的星星;此时移出星星,那么组件会恢复到原有值。只有在星星点击一下,值才会被固定下来,移出时不再恢复。
等级:<span id="level"></span>
<div id="rating"></div>
<div class="btn-bar">
<button id="disable">disable()</button>
<button id="enable">enable()</button>
<button id="minus">-</button>
<button id="add">+</button>
</div>
require(['jquery', 'moye/Rating'], function ($, Rating) {
var levels = ['低', '较低', '中', '较高', '高'];
var g = function (id) {
return document.getElementById(id);
};
var value = 2;
var level = g('level');
level.innerHTML = levels[value - 1];
var rating = new Rating({
main: g('rating'),
value: value,
onChange: function (e) {
value = e.value;
level.innerHTML = levels[e.value - 1];
// console.log(e.value);
},
onHover: function (e) {
level.innerHTML = levels[e.value - 1];
// console.log(e.value);
}
}).render();
g('disable').onclick = function () {
rating.disable();
}
g('enable').onclick = function () {
rating.enable();
}
g('minus').onclick = function () {
if (value > 0) {
// 此处setValue()不触发change事件
rating.setValue(--value);
}
}
g('add').onclick = function () {
if (value < 5) {
// 此处setValue()触发change事件
rating.setValue(++value, true);
}
}
});