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


  • 相关阅读:
    centos6.8安装DB2 10.5
    linux yum配置本地iso镜像
    DB2的空间数据库管理复杂配置
    高性能计算linux集群常用配置
    centos 6.8操作系统安装arcgis server 10.4
    【转】用python实现简单的文本情感分析
    Python3制作中文词云图
    MongoDB Replica Set搭建集群
    pycharm编写spark程序,导入pyspark包
    Mysql变量声明与使用
  • 原文地址:https://www.cnblogs.com/joyer-lee/p/8117916.html
Copyright © 2011-2022 走看看