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

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

article 2024/12/22 14:23:23

在某些情况下，可能需要将整个对象或部分对象嵌入到 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>

打印结果：

说明：

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

查看全文

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