JQuery UI Tooltip异常：仅首个同ID元素生效其余无显示

问题根源 #

• HTML规范明确要求id属性必须唯一，同一页面不能有多个元素共用同一个id。
• jQuery通过$("#barracks")选择元素时，只会返回第一个匹配该id的元素，所以后续三个带相同id的img元素根本没被绑定Tooltip事件。

修复步骤 #

1. 修改HTML：将重复id改为class #

把所有img标签的id="barracks"替换成class="barracks"，确保符合HTML规范。

修改后的HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>

<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.domain.com/adminp/occur/assets/img/soldier.jpg" class="barracks img-thumbnail img-fluid rounded float-start max-width: 100%;" alt="infantry" title="Infantry">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.domain.com/adminp/occur/assets/img/gunner.jpg" class="barracks img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="gunner" title="Gunner">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.domain.com/adminp/occur/assets/img/pilot.jpg" class="barracks img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="pilot" title="Pilot">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.domain.com/adminp/occur/assets/img/astronaut.jpg" class="barracks img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">
</div>

2. 修改JS代码：针对class选择器处理单个元素 #

原来的代码只操作第一个匹配元素，现在要遍历所有.barracks元素，给每个单独绑定Tooltip，并且点击时只操作当前被点击的元素。

修改后的JS代码：

// 给所有.barracks元素初始化Tooltip
$(".barracks").tooltip({
  disabled: true
});

// 绑定点击事件，仅操作当前被点击的元素
$(document).on("click", ".barracks", function() {
  const $currentImg = $(this);
  if ($currentImg.tooltip("option", "disabled")) {
    $currentImg.tooltip("enable").tooltip("open");
    $currentImg.off("mouseleave focusout");
  } else {
    $currentImg.tooltip("close").tooltip("disable");
  }
});

3. CSS代码保持不变 #

img {
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

关键说明 #

• 用class代替重复id是核心，既符合HTML标准，又能让jQuery选中所有目标元素。
• 点击事件中使用$(this)定位当前元素，确保每次操作只针对被点击的单个图片，实现预期的单个元素Tooltip控制逻辑。

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