一下僅僅將程式碼貼上來了，稍看下就會明白

html程式碼：

< view > < image src= '{{pic}}'></ image > </ view > < view wx:for= '{{images}}' wx:key = 'index' class= 'img' bindtap= 'click'> < image src= '{{item.pic}}' data-pic= '{{item.pic}}' data-id= '{{item.id}}' style= "border:{{item.id==currentid?'2px solid green':'2px solid #fff'}}" bindtap= 'borderTap'></ image > < view >{{item.name}} </ view > </ view >

接下來給每個迴圈的子元素增加點選樣式才是本文重點，看完下面的操作以後，相信你能夠豁然開朗。

我們可以給每個子元素新增點選事件：上面程式碼中的bindtap="borderTap"就是給每個元素新增點選事件，這個點選事件處理函式在js檔案中定義。下面我直接貼出這個頁面的完整js檔案：

// pages/pay/pay.js var app = getApp(); Page({ data:{ images:[], pic: '', currentid: '1' }, click: function(e){ var pic = e.target.dataset.pic this.setData({ pic:pic }) }, borderTap: function(e){ this.setData({ currentid:e.target.dataset.id }) console.log(e) }, onLoad: function(e){ var that = this; wx.request({ url: '你的介面', data:{ num : 6 }, success: function(res){ that.setData({ images: res.data.result.result.list, pic: res.data.result.result.list[ 0].pic, }); console.log(res.data.result.result.list) } }) } }) 總結：

實現的邏輯有點繞：首先通過JSON資料迴圈渲染圖片，然後給每個圖片一個統一的點選事件函式borderTap，通過這個函式修改當前頁面的全域性資料currentid為被點選元素的id，最後在檢視檔案中判斷當前元素的id是否等於這個值來修改被點選元素的樣式。

不得不這樣做的根本原因：小程式不能像javascript或者jquery一樣獲取DOM元素或JQ物件來修改樣式，而是通過setData({})方法重新整理全域性資料，然後回撥渲染方法來重繪DOM（懂ReactJS的童鞋應該很熟悉）。全域性資料是修改樣式的唯一依據，它由點選事件函式修改，但是不像靜態wxml每個導航元素都可以定義一個點選事件函式，通過迴圈遍歷的元素只能是呼叫同一個事件函式（我們定義的borderTap）修改全域性資料，所以我們需要獲取每個元素的唯一標識（我們定義在JSON中的id）來修改全域性資料，最後每個元素根據這個全域性資料來修改樣式。