zoukankan      html  css  js  c++  java
  • 小程序for循环中通过index实现单个点击事件

    <!--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";
    }
    }
    })


  • 相关阅读:
    小记css的margin collapsing
    linux—select具体解释
    搜索引擎技术之概要预览
    多线程和多进程的差别(小结)
    Android Bundle类
    Android中Preference的使用以及监听事件分析
    layoutSubviews总结
    win7下jdk安装环境变量配置
    LSPCI具体解释分析
    将二叉树转换成双向链表
  • 原文地址:https://www.cnblogs.com/joyer-lee/p/8117916.html
Copyright © 2011-2022 走看看