如何点击图标查看对象数组对应项详情？（jQuery/JS实现）

关键改动思路 #

• 修正DOM就绪事件的拼写错误：$('documnet') 改为 $(document)，确保页面加载完成后执行渲染逻辑
• 给眼睛图标的点击事件传递当前用户ID，让函数能定位到具体数据
• 利用数组find()方法快速过滤出对应ID的用户对象
• 结合Bootstrap模态框优雅展示详细数据，替代生硬的alert弹窗

完整修改后的代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="row" id="R1"></div>

<!-- 用于展示用户详情的Bootstrap模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1" aria-labelledby="userDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="userDetailModalLabel">用户详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="userDetailContent">
        <!-- 动态填充用户详情 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    var user={data:[
        {'id':1,'name':'Michael', 'mail':'abcd.gmail.com', 'phone':'11101989','image':'im/img1.png'},
        {'id':2,'name':'Mila', 'mail':'abcd.gmail.com', 'phone':'1011989','image':'im/img1.png'},
        {'id':3,'name':'Paul', 'mail':'abcd.gmail.com', 'phone':'10141990','image':'im/img1.png'},
        {'id':4,'name':'Dennis', 'mail':'abcd.gmail.com', 'phone':'11291993','image':'im/img1.png'},
        {'id':5,'name':'Tim', 'mail':'abcd.gmail.com', 'phone':'3121991','image':'im/img1.png'},
        {'id':6,'name':'Erik', 'mail':'abcd.gmail.com', 'phone':'10311995','image':'im/img1.png'}
    ]};
    
    $.each(user.data,function(key,value){
        $('#R1').append(`
            <div class="col-md-3 mb-3"><div class="card p-2">${value.name}</div></div>
            <div class="col-md-3 mb-3"><div class="card p-2">${value.mail}</div></div>
            <div class="col-md-3 mb-3"><div class="card p-2">${value.phone}</div></div>
            <div class="col-md-3 mb-3">
                <div class="card p-2" onclick="view(${value.id})">
                    <img style="width:20px" src='${value.image}' alt="查看详情">
                </div>
            </div>
        `);
    });
});

function view(userId){
    // 根据ID过滤用户数组，获取目标用户对象
    const selectedUser = user.data.find(item => item.id === userId);
    
    if(selectedUser){
        // 拼接用户详情的HTML内容
        const detailHtml = `
            <p><strong>ID:</strong> ${selectedUser.id}</p>
            <p><strong>姓名:</strong> ${selectedUser.name}</p>
            <p><strong>邮箱:</strong> ${selectedUser.mail}</p>
            <p><strong>电话:</strong> ${selectedUser.phone}</p>
            <p><strong>头像:</strong><br><img src="${selectedUser.image}" style="width:80px" alt="${selectedUser.name}的头像"></p>
        `;
        $('#userDetailContent').html(detailHtml);
        
        // 打开模态框展示详情
        const modal = new bootstrap.Modal(document.getElementById('userDetailModal'));
        modal.show();
    }
}
</script>

核心逻辑说明 #

1. 传递用户ID：在渲染卡片时，将当前用户的ID作为参数传给view函数，确保点击事件能关联到具体用户
2. 数组过滤：find()方法会遍历用户数组，返回第一个匹配id === userId的对象，这是高效定位单条数据的常用方法
3. 模态框展示：提前定义模态框结构，在view函数中动态填充数据并打开，相比alert弹窗更符合现代UI设计，也能展示更丰富的内容

内容的提问来源于stack exchange，提问作者Mohammed Ajmal