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


  • 相关阅读:
    windowsserver2016系统性能和功能对比介绍
    联想x3650m5服务器安装windows2008R2系统
    Linux修改主机名
    Windows Server 2008 R2 忘记密码的处理方法
    Centos7 安装教程(详细版)
    CentOS 6.5的安装详解(图文详解)
    centos 6.5 忘记用户名和密码
    磁盘阵列的区别和特点
    什么是OSI参考模型?
    MTU是什么?
  • 原文地址:https://www.cnblogs.com/joyer-lee/p/8117916.html
Copyright © 2011-2022 走看看