jQuery 實現動態表格 Hover 顯示/隱藏詳情：索引綁定模式最佳實踐

需求場景

動態生成的表格，每行包含「主信息」與「詳情信息」。鼠標懸停主信息顯示對應詳情，移出隱藏，**同一時間只顯示一行詳情**。

HTML 結構（動態生成）

<tr>
  <td>ID</td>
  <td>Content</td>
  <td>
    <div class="box" data-index="0">Nickname<br/>
      <div class="detail" style="display:none">Camper-Major-Grade</div>
    </div>
  </td>
</tr>

使用 `data-index` 替代 `id="box0"`，語義化且無 ID 衝突風險。

jQuery 核心實現：事件委託 + 索引關聯

$(document).on('mouseenter', '.box', function() {
    var idx = $(this).data('index');
    $('.detail[data-index="' + idx + '"]').show();
}).on('mouseleave', '.box', function() {
    var idx = $(this).data('index');
    $('.detail[data-index="' + idx + '"]').hide();
});

為什麼這樣寫更好？

進階：CSS 純樣式實現（無 JS）

/* HTML 結構調整：detail 為 box 同級或子級 */
.box:hover .detail { display: block; }
.detail { display: none; }

• 零 JS 依賴、性能極致、移動端觸屏需配合 `:active` 或媒體查詢降級。
• 若詳情內容複雜（含交互元素），JS 方案更可控。

總結

動態列表交互首選 **事件委託 + 數據屬性綁定**，擺脫 ID 依賴與閉包陷阱。簡單顯隱場景優先考慮 **CSS `:hover`**，複雜交互再上 JS。