微信小程序 多个样式 选中改变颜色 ，点击本身改变颜色，在点击本身取消颜色

 

 

 

wx.ml

    <view class="single_word {{item.show?'word_active':'word_noactive'}}" wx:for="{{arr}}" wx:key="{{this}}"  data-index="{{index}}" bindtap="wordShow">
                {{item.word}}
                <text class="c_sign" wx:if="{{item.show}}"></text>
            </view

 

wx.js

 data: {
    words: ["我", "是", "中", "国", "人",, "教", "育", "机", "构"],
    //前端处理的后端数据
    arr: null,
  },


/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let arr = new Array();
    let obj = {};
    this.data.words.forEach((item) => {
      obj.word = item;
      obj.show = false;
      arr.push(obj);
      obj = {};
    });
    this.setData(
      {
        arr,
      },
      () => {
        console.log(this.data.arr);
      }
    );
  },

  //点击切换样式
  wordShow(e) {
    // console.log(e.currentTarget.dataset.index)
    let idx = e.currentTarget.dataset.index;
    let arr = [...this.data.arr];
    let obj = {};
    arr.forEach((item, index) => {
      if (idx === index) {
        obj.word = item.word;
        obj.show = !item.show;
        arr.splice(index, 1, obj);
        console.log(obj);
        obj = {};
      }
    });
    this.setData({
      arr
    })
  },