微信小程序——获取当前点击的数据

最新推荐文章于 2023-09-10 16:28:24 发布

贝塔贝卡贝

最新推荐文章于 2023-09-10 16:28:24 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/118191896

这篇文章介绍了如何在WXML中通过点击列表项的开关按钮，获取其ID并更新相应列表项的checked属性。index.js中的switchThisChange函数实现了这一功能，通过遍历siteList并更新匹配ID的项状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在列表项，点击其中一条列表开关按钮，获取其id项，在该列表项数组中查询到匹配的ID项，将其列表项数据添加checked属性，测试点击的 “大C”列表项
在这里插入图片描述

index.wxml:

<view class="index-bottom" wx:for="{{siteList}}" wx:for-item="h" wx:key="*this" wx:if="{{switchAllChecked}}">
    <view class="bottom-content" wx:if="{{h.show}}">
        <text>{{h.name}}</text>
        <switch data-id="{{h.id}}" checked="{{h.checked}}" bindchange="switchThisChange" />
    </view>
</view>

index.js:

 /**
* 列表子开关控制事件
 */
switchThisChange:function(e){
  console.log("获取当前点击的数据：",e)
  let newsiteList = this.data.siteList.map((item)=>{
    if(item.id==e.currentTarget.dataset.id){
      item.checked = e.detail.value;
    }
    return item;
  })
  this.setData({
    siteList:newsiteList
  })
}

在这里插入图片描述