微信小程序请教一个多选的问题

Question

问题描述

见下图。
选中改变颜色，最多是7个。超过点击第8个会有提示。而且超过7个点击不改变颜色。
如果我点击之前选中的可以去除选中的颜色，而且还可以点击别的未选中。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<view class="habit_taglist">
        <view class="{{item.active?'active-tag':''}} habit_tag fl" wx:for="{{tags}}"  bindtap="tagTap" data-key="{{index}}" wx:key="index"   data-test="4">{{item.habitName}}</view>

</view>

tagTap: function (e) {
    this.setData({
      habittags: []
    })
    var index = e.currentTarget.dataset.key;
    console.log(this.data.tags)
    for (var i = 0; i < this.data.tags.length; i++) {
      if (this.data.tags[i].active) {
        this.data.habittags.push(
          {
            habitId: this.data.tags[i].zid,
            babyId: this.data.babyId,
            groupId: getApp().globalData.groupId,
            habitDay: this.data.tags[i].habitDay
          })
      }
    }
    this.setData({
      habittags: this.data.habittags
    })
    console.log(this.data.habittags)
    if (this.data.habittags.length >= 7) {
      if (this.data.tags[index].active) {
        this.data.tags[index].active = !this.data.tags[index].active
        this.setData({
          tags: this.data.tags
        });
      } else {
        var test = e.target.dataset.test;
        if (test == 4) {
          getApp().feedbackApi.showToast({
            title: '建议选择不超过7个习惯',
            mask: false
          })
        }
      }
    } else {
      this.data.tags[index].active = !this.data.tags[index].active
      this.setData({
        tags: this.data.tags
      });
    }
  },

你期待的结果是什么？实际看到的错误信息又是什么？

上面的有bug 求教

Answer 1

wxml文件

<view class="habit_taglist">
  <block wx:for="{{tags}}" wx:key="index" >
    <view 
      class="{{item.active?'active':'noactive'}}" 
      bindtap="tagTap" 
      data-content="{{item}}"
      data-index="{{index}}"
      >{{item.habitName}}</view>
  </block>  
</view>

wxss文件

.habit_taglist{
  display: flex;
  flex-wrap: wrap;
}
.noactive{
  width: 100rpx;
  height: 100rpx;
  border: 1rpx solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  background-color: #f00;
  width: 100rpx;
  height: 100rpx;
  border: 1rpx solid #f00;
  display: flex;
  justify-content: center;
  align-items: center;
}

js文件

const Page = require('../../utils/ald-stat.js').Page;
Page({
  data: {
    tags: [{ habitName: '1' }, { habitName: '2' },
      { habitName: '3' }, { habitName: '4' },
      { habitName: '5' }, { habitName: '6' },
      { habitName: '7' }, { habitName: '8' },
      { habitName: '9' }, { habitName: '10' },
      { habitName: '11' }, { habitName: '12' },
      { habitName: '13' }, { habitName: '14' },
      { habitName: '15' }, { habitName: '16' },
      { habitName: '17' }, { habitName: '18' }],
    tempTags:[],
    count:0
  },

  onLoad: function(options) {
  },
 
  tagTap: function (e) {
    let count = this.data.count
    const temoName = e.currentTarget.dataset.content.habitName
    const ii = e.currentTarget.dataset.index
    let temp = this.data.tags;
    temp.map((v, index) => {
      if (ii == index) {
        if(v.active){
          --count
          v.active = !v.active
        }else{
          if(count+1>7){
            return ;
          }else{
            ++count
            v.active = !v.active
          }
        }
      }
    })
    this.setData({
      tags: temp,
      count: count
    })
  }
})

结果如图所示