分享星级评价与星级显示！

不羁的风

先说实现效果！
1、用户点击星星按钮进行评分，点击确认按钮可将评分上传到数据库！（点击第5个星星按保存对应将数字5保存到数据库。）
2、前端显示，加入数据库中的评分是4，前端显示4颗星星。
项目结构如图：
注意：这里需要使用到两张图片，自行百度找两张星星图片！（1.png/2.png）

不羁的风

源码如下！
js:

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4. 
   
5.         var Model = function() {
   
6.                 this.callParent();
   
7.                 this.img1 = justep.Bind.observable("./img/2.png");
   
8.                 this.img2 = justep.Bind.observable("./img/2.png");
   
9.                 this.img3 = justep.Bind.observable("./img/2.png");
   
10.                 this.img4 = justep.Bind.observable("./img/2.png");
    
11.                 this.img5 = justep.Bind.observable("./img/2.png");
    
12.         };
    
13. 
    
14.         Model.prototype.getImageUrl = function(img) {
    
15. 
    
16.                 if (img == 'img1') {
    
17.                         return require.toUrl(this.img1.get());
    
18.                 } else if (img == 'img2') {
    
19.                         return require.toUrl(this.img2.get());
    
20.                 } else if (img == 'img3') {
    
21.                         return require.toUrl(this.img3.get());
    
22.                 } else if (img == 'img4') {
    
23.                         return require.toUrl(this.img4.get());
    
24.                 } else if (img == 'img5') {
    
25.                         return require.toUrl(this.img5.get());
    
26.                 }
    
27.         };
    
28. 
    
29.         Model.prototype.imageClick = function(event) {
    
30.                 var val = event.currentTarget.getAttribute('val');
    
31.                 var number = parseInt(val);
    
32.                 var gradeData = this.comp("gradeData");
    
33.                 for (var i = 1; i <= number; i++) {
    
34. 
    
35.                         var str = "this.img" + i + ".set('./img/1.png')"
    
36.                         eval(str);
    
37.                 }
    
38.                 for (var i = 5; i > number; i--) {
    
39. 
    
40.                         var str = "this.img" + i + ".set('./img/2.png')"
    
41.                         eval(str);
    
42.                 }
    
43.                 gradeData.setValue('grade', parseInt(val));
    
44.         };
    
45. 
    
46.         Model.prototype.button1Click = function(event) {
    
47.                 var gradeData = this.comp("gradeData");
    
48.                 gradeData.saveData({
    
49.                         onSuccess : function() {
    
50.                                 justep.Util.hint("保存成功");
    
51.                         }
    
52.                 });
    
53.                 //alert(gradeData.val("grade"));
    
54.         };
    
55. 
    
56.         return Model;
    
57. });

复制代码

不羁的风

html:

1. <?xml version="1.0" encoding="UTF-8"?>
   
2. 
   
3. <div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">  
   
4.   <div component="$UI/system/components/justep/model/model" xid="model"><div component="$UI/system/components/justep/data/data" autoLoad="true" xid="gradeData" idColumn="id"><column name="id" type="String" xid="xid1"></column>
   
5.   <column label=" 星级" name="grade" type="String" xid="xid2"></column>
   
6.   <data xid="default1">[{&quot;id&quot;:&quot;1&quot;,&quot;grade&quot;:&quot;0&quot;}]</data></div></div>
   
7. <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1">
   
8.    <div class="x-panel-top" xid="top1"></div>
   
9.    <div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/row/row" class="x-row pull-right" xid="row3">
   
10.    <div class="x-col" xid="col3">
    
11.     <img bind-attr-src="$model.getImageUrl('img1')" alt="" xid="image34" val="1" bind-click="imageClick" name="1" bind-ref='gradeData.ref("grade")'></img>
    
12.     <img bind-attr-src="$model.getImageUrl('img2')" alt="" xid="image33" val="2" bind-click="imageClick" name="2" bind-ref='gradeData.ref("grade")'></img>
    
13.     <img bind-attr-src="$model.getImageUrl('img3')" alt="" xid="image36" val="3" bind-click="imageClick" name="3" bind-ref='gradeData.ref("grade")'></img>
    
14.     <img bind-attr-src="$model.getImageUrl('img4')" alt="" xid="image35" val="4" bind-click="imageClick" name="4" bind-ref='gradeData.ref("grade")'></img>
    
15.     <img bind-attr-src="$model.getImageUrl('img5')" alt="" xid="image37" val="5" bind-click="imageClick" name="5" bind-ref='gradeData.ref("grade")'></img></div> </div>
    
16.   <a component="$UI/system/components/justep/button/button" class="btn btn-default" label="保存" xid="button1" onClick="button1Click">
    
17.    <i xid="i1"></i>
    
18.    <span xid="span1">保存</span></a>
    
19.   <div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
    
20.    <div class="x-col" xid="col1">
    
21.     <img bind-attr-src='gradeData.val("grade")&lt;=0?"img/2.png":"img/1.png"' alt="" xid="image1" val="1" name="1" src="./img/2.png" style="height:17px;"></img>
    
22.     <img bind-attr-src='gradeData.val("grade")&lt;=1?"img/2.png":"img/1.png"' alt="" xid="image5" val="2" name="2" src="./img/2.png" style="height:17px;"></img>
    
23.     <img bind-attr-src='gradeData.val("grade")&lt;=2?"img/2.png":"img/1.png"' alt="" xid="image2" val="3" name="3" src="./img/2.png" style="height:17px;"></img>
    
24.     <img bind-attr-src='gradeData.val("grade")&lt;=3?"img/2.png":"img/1.png"' alt="" xid="image4" val="4" name="4" src="./img/2.png" style="height:17px;"></img>
    
25.     <img bind-attr-src='gradeData.val("grade")&lt;=4?"img/2.png":"img/1.png"' alt="" xid="image3" val="5" name="5" src="./img/2.png" style="height:17px;"></img></div> </div></div>
    
26.    <div class="x-panel-bottom" xid="bottom1"></div></div></div>

复制代码

不羁的风

如上，复制粘贴即可使用，欢迎指正！

不羁的风

源代码文件

justepfu

如果有5个需要这样的评价，如何做？谢谢。。。

不羁的风

justepfu 发表于 2016-11-5 21:06
如果有5个需要这样的评价，如何做？谢谢。。。

一样的道理啊

justepfu

如果25个星星，5个评价对象，这样写有点太麻烦了，有没有简便一点的写法？谢谢。

不羁的风

自己想嘍，不同需求有不同方法。比如list

YZH

谢谢分享