在小程序里实现星星评级

1.点亮的星星和未点亮的是两张图片，都是通过循环渲染生成的，初始化评级为0，则不亮的星星的个数为 总评级减去当前评级。而点亮的星星个数就是评级数。

2.WXML文件里，先写点亮再写未点亮。如下：

<view class='star-cell' wx:for="{{feedbacks}}" wx:for-item="feedback" wx:for-index="findex" wx:for-key="findex">
      <text>{{feedback.feedbackname}}：</text>
      <view class='star-box'>
        <image data-yindex="{{yindex}}" 
        bindtap='howManyYellow' 
        wx:for="{{feedback.level}}" 
        wx:for-index="yindex" 
        src='../../images/star-selected.png'></image>


        <image data-index="{{index}}" 
        bindtap='howManyGray' 
        wx:for="{{5-feedback.level}}" 
        wx:for-index="index" 
        src='../../images/star.png'></image>
      </view>
</view>

3.JS文件里

data:{
    feedbacks:[
      {
        feedbackname:"味道",
        level:0,
      },
      {
        feedbackname: "价格",
        level: 0,
      },
      {
        feedbackname: "服务",
        level: 0,
      }
    ]
}
  howManyGray(e){
    var findex = e.currentTarget.dataset.findex;
    var index = e.currentTarget.dataset.index;
    var farr = this.data.feedbacks;
    farr[findex].level=farr[findex].level+index+1;
    this.setData({
      feedbacks: farr
    })
  },
  howManyYellow(e) {
    var findex = e.currentTarget.dataset.findex;
    var yindex = e.currentTarget.dataset.yindex;
    console.log(yindex);
    var farr = this.data.feedbacks;
    farr[findex].level = yindex+1;
    this.setData({
      feedbacks: farr
    })
  },