首先来看一下效果：

说一下思路：从后台传来的json，然后微信小程序端通过wx:for方法渲染出来，可以看到，一开始的按钮状态status都是灰色，（自定义0为灰色，1为彩色）。如果想要一次点击修改全部元素内容的话，那么对这些按钮设置一个status变量即可，通过改变按钮的status=1，按钮在循环队列中则会全部变为1。

如果想要达到顶部图片的效果。那么以下进入正题：

通过图片可以发现，我们在点击事件中只是修改了当前元素的内容，而其他元素并没有改变。我们又知道，数组里面每个数组元素都有一个下标，这个渲染内容是因为这个数组元素的不同而产生的效果，想到这里，成功了一半啦！^o^

接下来的一半，就是我们如何获取下标对应的数组元素，然后去修改它。

这里我针对小程序端来讲解，而对于点击事件post的处理就根据自己的需求设计。

我们来看看界面样式的设计：

!--mission.wxml--view class="container"  view class="mission-item" wx:for="{{getPost}}" wx:key='id'      !--领取任务样式--      view class='mission-icon' wx:if = "{{item.status == 0}}"         view class='missionfont' data-index = '{{index}}'              catchtap="acceptMission"                领取任务         /view      /view          !--取消任务样式--      view class='accept-mission-icon' wx:if = "{{item.status == 1}}"         view class='acceptfont' data-index = '{{index}}'              catchtap="cancelMission"                 正在行动         /view      /view   /view/vew

这段代码中有两个关键的地方：

①data-index = '{{index}}'     这串代码用得也比较多，我是这样理解的：前半部分data-index相当于声明一个接口，等号后面的内容“{{index}}”，其实就是数组对应元素的下标。这一整句，可以理解为接口和其中的内容绑定起来（不另外定义的话，默认下标就是index）

②catchtap。这里要跟bindtap区分一下，首先它们两个都是点击事件，但是又有些许的不同。bindtap是冒泡事件，会一直向上执行，catchtap刚好相反。选择上一般根据需求使用。

设计好xml布局之后，来看看js的核心部分应该怎么写。

我们先来想一下算法：获取布局对应元素的下标找到对应按钮判断该按钮的状态改变状态重新赋值数组。

一、领取任务事件：

Page({ data:{  Mission:[] }//领取任务 acceptMission: function (e) {    // 获取当前点击下标        var Index = e.currentTarget.dataset.index;    console.log(Index);    // data中获取列表       var missionArr = this.data.Mission;    for (let i in missionArr) {      //遍历列表数据            if (i == Index) {        //根据下标找到目标,改变状态          if (missionArr[i].status == 0) {          missionArr[i].status = parseInt(missionArr[i].status) + 1        }      }    }    //数组重新赋值    this.setData({      Mission: missionArr    })    wx.showToast({      title: '领取成功',    })  },})

二、取消任务，改变状态即可：

Page({ data:{  Mission:[] }//取消任务 cancelMission: function (e) {    // 获取当前点击下标        var Index = e.currentTarget.dataset.index;    console.log(Index);    // data中获取列表       var missionArr = this.data.Mission;    for (let i in missionArr) {      //遍历列表数据            if (i == Index) {        //根据下标找到目标,改变状态          if (missionArr[i].status == 1) {          missionArr[i].status = parseInt(missionArr[i].status) - 1        }      }    }    //数组重新赋值    this.setData({      Mission: missionArr    })    wx.showToast({      title: '取消成功',    })  },})

在点击事件触发的时候，还可以想服务器发送请求获得自己需要的功能，鉴于每个小伙伴的功能都不一样，就不过多展开叙述了，不过大体的方法都差不多的。

原子核+电子=原子，努力+坚持=成功。