使用jQuery Tooltip加载相同数据的可行性及重复ID问题排查

你猜的完全没错！重复ID就是导致text2无法显示tooltip的核心原因——HTML规范明确要求ID在整个文档中必须唯一，jQuery虽然能选中所有<span>，但后续通过$("#"+id)定位元素时，只会匹配到第一个拥有该ID的元素，所以第二个带相同ID的span永远无法正确加载tooltip内容。

下面给你两个实用的修复方案，还有额外的优化建议：

方案1：用data属性替代重复ID（推荐） #

把HTML里的重复ID换成data-userid属性，既规避了ID重复问题，又能更直观地存储用户ID：

修改后的HTML结构 #

<div class="content"><a href="#"><span data-userid="801130021">text1</span></a></div>
<div class="content"><a href="#"><span data-userid="801130021">text2</span></a></div>
<div class="content"><a href="#"><span data-userid="1301193710">text3</span></a></div>

修改后的JS代码 #

$(document).ready(function(){
    // 初始化tooltip
    $("span").tooltip({
        track: true,
        open: function(event, ui) {
            ui.tooltip.css("max-width", "100%");
            // 从data属性直接获取userid，不用拆分ID了
            const userid = $(this).data('userid');
            const $currentSpan = $(this);
            
            $.ajax({
                url: 'fetch_details.php',
                type: 'post',
                data: { userid: userid },
                success: function(response) {
                    // 给当前触发tooltip的span设置内容
                    $currentSpan.tooltip('option', 'content', response);
                }
            });
        }
    });

    $("span").mouseout(function(){
        $('.ui-tooltip').hide();
        // 可选：重置tooltip内容，避免下次显示旧数据
        $(this).tooltip('option', 'content', '');
    });
});

方案2：保留ID但确保唯一性（不推荐） #

如果一定要用ID，可以给每个span加唯一后缀（比如序号），然后在JS里拆分ID时提取真正的用户ID：

修改后的HTML #

<div class="content"><a href="#"><span id="user_801130021_1">text1</span></a></div>
<div class="content"><a href="#"><span id="user_801130021_2">text2</span></a></div>
<div class="content"><a href="#"><span id="user_1301193710_3">text3</span></a></div>

修改JS中获取userid的逻辑 #

const id = this.id;
const split_id = id.split('_');
// 取拆分后的第二个元素作为用户ID
const userid = split_id[1];

重要优化建议：修复SQL注入风险 #

你的PHP代码存在严重的SQL注入漏洞！直接把$userid拼接到SQL语句里是非常危险的操作，必须用参数绑定来修复：

<?php
$userid = $_POST['userid'];
// 使用参数绑定替代直接拼接SQL
$query = $db->prepare("SELECT * FROM master_post WHERE id_master_post = :userid");
$query->bindParam(':userid', $userid);
$query->execute();

$html = '<div>';
while ($value = $query->fetch()) {
    $information = html_entity_decode($value['information']);
    $dom = new DOMDocument();
    @$dom->loadHTML($information);
    $image = $dom->getElementsByTagName('img')->item(0)->getAttribute('src');
    // 用htmlspecialchars转义图片URL，防止XSS攻击
    $html .= "<img src='" . htmlspecialchars($image) . "' height='300px' width='250px'>";
}
$html .= '</div>';
echo $html;
?>

这里还添加了htmlspecialchars($image)来防止XSS攻击，避免恶意图片URL执行危险代码。

另外，你还可以给tooltip加个加载状态（比如在请求数据时显示“加载中...”），提升用户体验哦~

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