基于MySQL记录生成动态链接ID，实现jQuery点击交互需求

没问题，我来帮你搞定这个需求！下面是分步骤的解决方案：

1. PHP端生成带动态ID的可点击链接 #

首先，在从MySQL获取记录并循环输出时，我们给每个<a>标签加上自定义数据属性来存储记录的ID，同时保留你用#做测试的href。这样既不会触发跳转，又能方便后续获取对应记录的ID。

假设你的PHP查询代码大致如下（适配你现有的数据库连接逻辑即可）：

// 假设已完成MySQL连接（mysqli/POD都可以）
$query = "SELECT id, content FROM your_table_name";
$result = mysqli_query($conn, $query);

// 循环输出每条记录的链接
while ($row = mysqli_fetch_assoc($result)) {
    // 用class统一标识所有记录链接，data-record-id存储动态ID
    echo '<a href="#" class="record-item" data-record-id="' . $row['id'] . '">查看记录 ' . $row['id'] . '</a><br>';
}

这里的class="record-item"是为了让jQuery能批量选中这些链接，data-record-id则是规范的HTML5自定义属性，专门用来存储页面内的自定义数据。

2. jQuery实现点击事件与结果展示 #

接下来写jQuery代码，监听这些链接的点击行为，阻止默认跳转，获取对应的记录ID并展示到#div2中：

// 确保DOM加载完成后执行代码
$(document).ready(function() {
    // 监听所有.record-item的点击事件
    $('.record-item').on('click', function(e) {
        // 阻止<a>标签默认的跳转行为（因为href是#，不然会跳到页面顶部）
        e.preventDefault();
        
        // 获取当前点击链接对应的记录ID
        var targetId = $(this).data('record-id');
        
        // 将结果展示到#div2中，你可以自定义展示的文本格式
        $('#div2').html('你选中的记录ID为：<strong>' + targetId + '</strong>');
        
        // 如果需要根据ID加载更多记录详情，可以在这里加AJAX请求
        // 示例：
        // $.ajax({
        //     url: 'get_record_detail.php',
        //     type: 'GET',
        //     data: { id: targetId },
        //     success: function(res) {
        //         $('#div2').html(res);
        //     }
        // });
    });
});

关键细节说明 #

• 用data-*属性存储ID比直接把ID塞到href里更规范，也避免了跳转干扰；
• 必须加e.preventDefault()，否则点击链接会触发默认的锚点跳转，影响体验；
• 如果后续需要展示记录的完整内容，只需在点击事件里添加AJAX请求，把后端返回的详情渲染到#div2即可。

如果你的现有PHP代码和示例逻辑有差异，可以把代码贴出来，我再帮你针对性调整~

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