当前位置: 首页 > article >正文

在js渲染的dom中的事件中传递对象

在某些情况下,可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中,可以将对象数据序列化为 JSON 字符串,存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入 JSON 数据</title>
</head>
<body>
    <div id="container"></div>

    <script>
        // 对象数组
        const users = [
            { id: 1, name: 'Alice', age: 25, job: 'Engineer' },
            { id: 2, name: 'Bob', age: 30, job: 'Designer' },
            { id: 3, name: 'Charlie', age: 35, job: 'Teacher' }
        ];

        // 获取容器
        const container = document.getElementById('container');

        // 使用模板字符串拼接对象属性并嵌入 JSON 数据
        let html = '';
        users.forEach(user => {
            html += `
                <div class="user-card">
                    <h2>${user.name}</h2>
                    <p>Age: ${user.age}</p>
                    <p>Job: ${user.job}</p>
                    <button data-user='${JSON.stringify(user)}'>查看详情</button>
                </div>
            `;
        });

        // 将拼接的 HTML 插入到页面中
        container.innerHTML = html;

        // 事件委托绑定点击事件
        container.addEventListener('click', function(event) {
            if (event.target && event.target.tagName === 'BUTTON') {
                const userData = event.target.getAttribute('data-user');
                const user = JSON.parse(userData); // 解析 JSON 字符串为对象
                 console.log(user);
				                 console.log(`用户详情: ${user.name}, 年龄: ${user.age}, 职业: ${user.job}`);
            }
        });
    </script>
</body>
</html>

打印结果:

说明:

  1. 嵌入 JSON 数据:在按钮的 data-user 属性中嵌入了整个用户对象,使用 JSON.stringify() 将对象转化为字符串。
  2. 提取 JSON 数据:在点击事件中,通过 getAttribute 获取 data-user 属性的值,并使用 JSON.parse() 将其转化回对象形式使用。

http://www.kler.cn/news/291150.html

相关文章:

  • 米家商城主题 html 页面源码分享,可用于网页设计作业
  • 室内导航定位系统在医院的应用与部署
  • Kubernetes学习指南:保姆级实操手册05——配置集群HA负载均衡
  • 智能巡检机器人创新设计的关键技术
  • Xml 映射文件中常见的标签
  • python(进阶2)实现自动化注册和登录
  • 长芯微国产LS0102电平转换器/电平移位器P2P替代TXS0102
  • 支付宝线上小程序打开异常
  • VUE3+FLASK+TYPESCRIPT(实习接触,学习并自主实现)
  • 硬件-电源常识
  • Python作为客户端连接websocket
  • 10.2 TCP IP模型、IP协议、IPv4、子网掩码
  • SpringBoot3 项目部署
  • 【计算机毕业设计】微信小程序的美甲店铺座位预约系统
  • 数据结构(6.4_6)——拓扑排序
  • SDIO驱动开发
  • 支持萝卜快跑:AI能否颠覆出租车与外卖行业?
  • 大模型研发全揭秘:数据决定模型成败!如何确保数据采集不踩坑?
  • http、https、https原理
  • UI自动化测试 —— 下拉选择框弹出框滚动条操作实践!