[微信小程序]实现列表点赞并让当前节点的图片改变,值加1完整实例代码加GIF图

//wxml
<block wx:for="{{msg}}">
<image  wx:if="{{item.is_say_yes ==false}}" bindtap='zan' data-id='{{item.id}}' src='../../image/zan1.png'></image>
<image  wx:if="{{item.is_say_yes ==true}}" bindtap='zan' data-id='{{item.id}}' src='../../image/zan2.png'></image>
<text> {{item.num_say_yes}}</text>
</block>
//js
data:{
//'is_say_yes':false 的意思是默认没有点赞  num_say_yes参数是点赞数
msg:[{'a':1,'is_say_yes':false,'num_say_yes':0},
{'b':2,'is_say_yes':false,'num_say_yes':0}
]
}
zan: function (e) {
var info_id = e.currentTarget.dataset.id;
var that = this;
var url = util.apiUrl + 'FWinfo/give_like';
util.request(url, 'post', { 'program_id': app.program_id, 'info_id': info_id, 'openid': app.openid }, '正在加载数据', function (res) {
if (res.data.state == 1) {
wx.showToast({
title: '点赞成功',
icon: 'success',
duration: 2000
})
for (var i = 1; i < that.data.msg.length; i++) {
if (that.data.msg[i].id == info_id) {
// 点赞成功时遍历msg对象并获取到当前节点的id
that.setData({
// 改变msg对象 i 节点的 is_say_yes 的值为true,num_say_yes值等于当前的num_say_yes加一
['msg[' + i + '].is_say_yes']: true,
['msg[' + i + '].num_say_yes']: parseInt(that.data.msg[i].num_say_yes) + 1
})
}
}
} else if (res.data.state == -1) {
wx.showToast({
title: '操作失败',
image: '../../image/false.png',
duration: 2000
})
} else {
wx.showToast({
title: '已点赞',
icon: 'success',
duration: 2000
})
}

})
},