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


  • 相关阅读:
    JDBC连接MySQL数据库及演示样例
    用 managedQuery() 时须要注意的一个陷阱
    JAVA Calendar具体解释
    serialVersionUID作用
    D3DXMatrixMultiply 函数
    不同数据库oracle mysql SQL Server DB2 infomix sybase分页查询语句
    破解中国电信华为无线猫路由(HG522-C)自己主动拨号+不限电脑数+iTV
    数据库的增删改查和使用流程
    OutputCache说明
    HDU 4292Food(网络流的最大流量)
  • 原文地址:https://www.cnblogs.com/joyer-lee/p/8117916.html
Copyright © 2011-2022 走看看