mui实现评价星星点亮

总共5颗星，点击哪个就把前面几个星星都高亮。

首先，遍历5颗星，v-for=‘n in 5’ ，然后星星用图片img标签或背景。

然后，这个星星图片是关键，它是由灰色和高亮色两个图组成的一个图标。

最后，点击的时候就判断当前星星是不是小于等于点击的数量编号。如果等于就把这颗星加上light类，这个light类就是让星星显示图标的高亮色部分。
http://www.bslxx.com/m/view.php?aid=2163

<div class="icons mui-inline icons_envirnment">机舱环境<i data-index="1" class="mui-icon mui-icon-star"></i><i data-index="2" class="mui-icon mui-icon-star"></i><i data-index="3" class="mui-icon mui-icon-star"></i><i data-index="4" class="mui-icon mui-icon-star"></i><i data-index="5" class="mui-icon mui-icon-star"></i>
</div>

`<script src="mui/js/mui.min.js"></script>`

$(".icons_envirnment").on("click","i",function(e){var index=$(this).index()+1;  //var max=$(".icons_envirnment i:last").index()+1;for(var i=1;i<=max;i++){$(".icons_envirnment i:nth-child("+i+")").addClass("mui-icon-star-filled"); }for(var i=index+1;i<=max;i++){ $(".icons_envirnment i:nth-child("+i+")").removeClass("mui-icon-star-filled");}$('#commentEnvironmentValue').val($(this).index());
});

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="mui/css/mui.min.css"><style>body ,html{background-color: white;font-size: 13px;color: black;}ul,li {margin: 0;padding: 0;list-style: none;}#star {position: relative;top: 60px;}.star-item {display: inline-block;background-repeat: no-repeat;width: 30px;height: 40px;margin-left: 10px;background-size: 100%;}.star-item.on {background-image: url(./img/1.png);}.star-item.half {background-image: url(./img/2.png);}.star-item.off {background-image: url(./img/3.png);}.fileinput-button {position: relative;display: inline-block;overflow: hidden;}.fileinput-button input{position:absolute;right: 0px;top: 0px;opacity: 0;font-size: 20px;}</style>
</head><body><div id="app"><iframe id="target_fileSubmit" name="target_fileSubmit" style="display: none;"></iframe><header id="header" class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><!-- <a href="index.jsp"><img style="text-align: left;" width="44px" alt="" src="data:images/return.png"></a> --><h1 class="mui-title">评价</h1><!-- <img style="float: right;" width="44px" alt="" src="data:images/plane.png"> --></header><div id="star"><div class="mui-row"><div class="mui-col-sm-8"><li class="mui-table-view-cell"> 机舱环境</li></div><div class="mui-col-sm-6 "><li v-for="(itemClass,index) in icons_envirnment" :class="itemClass" id="commentEnvironmentValue" class=" star-item" @click="stars_envirnment(index)"v-bind:key="index"></li><!--性能优化 v-bind:key 数据不改变时不会重新渲染--></div></div><div class="mui-row"><div class="mui-col-sm-8"><li class="mui-table-view-cell"> 服务态度</li></div><div class="mui-col-sm-6 "><li v-for="(itemClass,index) in icons_service" :class="itemClass" id="commentServiceValue" class=" star-item" @click="stars_service(index)"v-bind:key="index"></li></div></div><div class="mui-row"><div class="mui-col-sm-8"><li class="mui-table-view-cell"> 用餐口味</li></div><div class="mui-col-sm-6 "><li v-for="(itemClass,index) in icons_food" :class="itemClass" id="commentFoodValue" class="star-item" @click="stars_food(index)"v-bind:key="index"></li></div></div></div></div><script src="vue/vue.min.js"></script><script src="jquery/jquery.min.js"></script><script src="mui/js/mui.min.js"></script><script>var app = new Vue({el: '#app',data: {msg: "fasnk",score_envirnment: 0,score_service: 0,score_food: 0},computed: { //计算属性icons_envirnment() {let result = []; // 返回的是一个数组,用来遍历输出星星let score_envirnment = Math.floor(this.score_envirnment * 2) / 2; // 计算所有星星的数量let hasDecimal = score_envirnment % 1 !== 0; // 非整数星星判断let integer = Math.floor(score_envirnment); // 整数星星判断for (let i = 0; i < integer; i++) { // 整数星星使用onresult.push("on"); // 一个整数星星就push一个CLS_ON到数组}if (hasDecimal) { // 非整数星星使用halfresult.push("half"); // 类似}while (result.length < 5) { // 余下的用无星星补全,使用offresult.push("off");}return result;},icons_service() {let result = []; // 返回的是一个数组,用来遍历输出星星let score_service = Math.floor(this.score_service * 2) / 2; // 计算所有星星的数量let hasDecimal = score_service % 1 !== 0; // 非整数星星判断let integer = Math.floor(score_service); // 整数星星判断for (let i = 0; i < integer; i++) { // 整数星星使用onresult.push("on"); // 一个整数星星就push一个CLS_ON到数组}if (hasDecimal) { // 非整数星星使用halfresult.push("half"); // 类似}while (result.length < 5) { // 余下的用无星星补全,使用offresult.push("off");}return result;},icons_food() {let result = []; // 返回的是一个数组,用来遍历输出星星let score_food = Math.floor(this.score_food * 2) / 2; // 计算所有星星的数量let hasDecimal = score_food % 1 !== 0; // 非整数星星判断let integer = Math.floor(score_food); // 整数星星判断for (let i = 0; i < integer; i++) { // 整数星星使用onresult.push("on"); // 一个整数星星就push一个CLS_ON到数组}if (hasDecimal) { // 非整数星星使用halfresult.push("half"); // 类似}while (result.length < 5) { // 余下的用无星星补全,使用offresult.push("off");}return result;},},methods: {stars_envirnment: function (index) {this.score_envirnment = index + 1},stars_service: function (index) {this.score_service = index + 1},stars_food: function (index) {this.score_food = index + 1},}})</script>
</body></html>

vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
https://www.jb51.net/article/149712.htm

mui实现评价星星点亮相关推荐

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）
在小程序的开发过程中,我们会遇到一种情况,就是在制作五星点评的时候,默认五颗星星都是要亮的.这里我们就要分享一下自己做默认五星的心得. 在这里我们先看一下效果图: 我们在订单页面的时候,当点击&quo ...
JS之评价页面点亮星星进行评价
效果如下: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8">< ...
原生jquery实现星级评分功能，鼠标滑过点亮星星
背景:首先,这个功能是很常见的一个效果,无论是PC端还是移动端,评分和反馈都屡见不鲜,但是大多数实现都是直接引用组件库里的组件来实现的,而我今天要给大家分享的是通过原生js自己手写实现的同样效果,针对 ...
星星评价控件android开发_android自定义星级评分控件，可实现只显示实心星星
话不多说,上图近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图但是网上关于星级评分的例子大多这样也展示虚心星星通过自定义Viewpackage com.starsba ...
改变元素属性方法_IMR：全球品牌如何结合本土文化元素以提高品牌评价 | 唧唧堂论文解析...
picture from Internet 解析作者 | 唧唧堂管理学研究小组:木鱼审校 | 唧唧堂管理学研究小组:Eric J推送编辑 | 悠悠本文是针对2019年发表在<Internati ...
恰星V3S投影仪好不好？适合学生党购入么？
今天朋友给小编看了一个新的便携投影仪叫恰星V3S,从外观设计来说和其他投影仪没有太大差别,但是朋友说具体配置还不错,和小编喜爱的当贝C2有的一拼,那么今天就和小编一起来看看恰星V3S投影仪好不好?当贝 ...
小程序实现星星评分(共10分),含有半星
完整代码地址:https://download.csdn.net/download/qq_40190624/11154051 效果图: 星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰 ...
html5 人在星空中,《在星空中》的教学设计
教学背景分析: 从本课开始,学生将展开对星座的认识.涉及星座的教学内容分为五部分:第一部分了解星座:第二部分建立一个"星座"模型:第三部分认识四季主要星座:第四部分开个观察交流会: ...
星敏感器 matlab,基于星敏感器的星图模拟与去噪技术研究
2017年 9月上论述 247 基于星敏感器的星图模拟与去噪技术研究刘奕君 ,薄宇阳 (北京市第三十五中学,北京市西城区 100032) [摘要]随着小卫星应用技术的日趋成熟,测量精度高的 CC ...

mui实现评价星星点亮

mui实现评价星星点亮相关推荐

最新文章

热门文章