小程序for循环中通过index实现单个点击事件
2024-04-06 21:33:31
<!--xml-->
<view class='content3-list' wx:for="{{listItems}}" >
<view class='list-left'>
<image id="{{index}}" bindtap='clickRight' src= '{{item.rightImage}}' />
<text class='list-left-wd'>{{item.word}}</text>
<text class='list-left-exp'>{{item.explain}}</text>
</view>
<view class='list-right'>
<image src="../../images/del.png" />
</view>
</view>
<!--js-->
Page({
// 页面的初始数据
data: {
listItems: [
{
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}, {
"rightImage": "/images/right.png",
"word": "book",
"explain": "书；卷；课本；账簿"
}
]
},
clickRight: function (e) {
var idx = parseInt(e.currentTarget.id);
var img = this.data.listItems;
if ("/images/right.png" == img[idx].rightImage) {
img[idx].rightImage = "/images/right1.png";
} else {
img[idx].rightImage = "/images/right.png";
}
}
})
最新文章
- ubuntu 安装Elasticsearch5.0（Debian包）
- bzoj 1014 splay维护hash值
- DevExpress 为TextEdit设置水印文字
- jmeter（一）基础介绍
- 解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed
- A. Anton and Letters
- Js 返回页面 or 跳转页面
- JAVA基础第五组（5道题）
- replace 使用函数作为第二参数
- 【翻译】Siesta事件记录器入门
- Netty3：分隔符和定长解码器
- 每天一点Linux系列之—vim
- codeforces285B
- day15 函数的使用方法：递归函数
- js控制style样式
- HDU1698(KB7-E 线段树)
- 【抓包分析】Charles和 夜神模拟器 对安卓应用进行抓包分析
- Oracle 起诉 Google 事件
- stl算法:next_permutation剖析
- iterm2 学习笔记