如何修改JS代码，从多链接data属性获取数据并隐藏坐标与ID信息

PHP端代码修改 #

不再生成展示所有字段的表格，而是循环生成仅显示名称、携带data-id和data-points属性的链接，同时限制最多生成20个：

<?php
// 假设已通过MySQLi获取结果集 $result
$linkCount = 0;
while ($row = $result->fetch_assoc() && $linkCount < 20) {
    // 转义输出内容，防范XSS风险
    $safeName = htmlspecialchars($row['name']);
    $pointsStr = "{$row['x']},{$row['y']}";
?>
    <a href="javascript:void(0)" class="item-link" 
       data-id="<?php echo $row['id']; ?>" 
       data-points="<?php echo $pointsStr; ?>">
        <?php echo $safeName; ?>
    </a>
<?php
    $linkCount++;
}
?>

JS端事件处理 #

通过类名绑定点击事件，读取链接的data-*属性获取所需数据：

// 事件委托方式，兼容动态生成的链接
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('item-link')) {
        const itemId = e.target.dataset.id;
        const [xCoord, yCoord] = e.target.dataset.points.split(',');
        
        // 这里替换成你原有的数据处理逻辑
        console.log('ID:', itemId, 'X坐标:', xCoord, 'Y坐标:', yCoord);
    }
});

注意事项 #

• 必须用htmlspecialchars()转义用户可见的名称字段，避免跨站脚本攻击。
• 如果x/y坐标是数值类型，拆分后可通过parseFloat()转换为数字再使用。
• 若需要存储更复杂的坐标结构，可将数组转为JSON字符串存入data-points，PHP端用json_encode([$row['x'], $row['y']])生成，JS端用JSON.parse()解析。

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