layui实现星级评分功能
时间: 2023-06-29 14:03:47 浏览: 49
在layui中实现星级评分功能,可以使用laytpl模板引擎和layedit富文本编辑器。以下是一个简单的实现示例:
HTML代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">评分</label>
<div class="layui-input-block">
<div class="layui-inline">
<div id="star"></div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-primary" id="submitBtn">提交</button>
</div>
</div>
</div>
```
JavaScript代码:
```javascript
layui.use(['laytpl', 'layedit'], function(){
var laytpl = layui.laytpl;
var layedit = layui.layedit;
// 渲染星级评分模板
var starTpl = '<i class="layui-icon layui-icon-star {{d.score>=1 ? \'layui-icon-rate-solid\' : \'\'}}"></i>' +
'<i class="layui-icon layui-icon-star {{d.score>=2 ? \'layui-icon-rate-solid\' : \'\'}}"></i>' +
'<i class="layui-icon layui-icon-star {{d.score>=3 ? \'layui-icon-rate-solid\' : \'\'}}"></i>' +
'<i class="layui-icon layui-icon-star {{d.score>=4 ? \'layui-icon-rate-solid\' : \'\'}}"></i>' +
'<i class="layui-icon layui-icon-star {{d.score>=5 ? \'layui-icon-rate-solid\' : \'\'}}"></i>';
var starData = {score: 0}; // 初始评分为0
var starHtml = laytpl(starTpl).render(starData);
$('#star').html(starHtml);
// 监听星级评分点击事件
$('#star').on('click', '.layui-icon-star', function(){
var index = $(this).index();
starData.score = index + 1;
starHtml = laytpl(starTpl).render(starData);
$('#star').html(starHtml);
});
// 监听提交按钮点击事件
$('#submitBtn').on('click', function(){
var score = starData.score;
// TODO: 将评分提交到后台
});
});
```
在上面的示例中,使用laytpl模板引擎渲染星级评分模板,并使用jQuery监听星级评分点击事件,更新评分数据并重新渲染模板。当点击提交按钮时,将评分数据提交到后台进行处理即可。