JavaScript+HAML中如何通过标签名获取ID？解决单图悬停隐藏异常

你的核心问题有两个：

1. HTML元素ID重复：HAML里所有图片的id都设为image，这违反了HTML规范（ID必须唯一），导致JS无法正确定位单个图片。
2. JS选择器与事件逻辑错误：你只获取了第一张图片的ID，且选择器写法错误，同时触发隐藏时选中了所有图片，而非当前悬停的那张。

步骤1：修正HAML中的图片ID #

把图片的ID改成基于photo.id的唯一值，确保每个图片都有独立标识：

.centered
  %table.table
    %tbody
      - @sorted_photos_array.each do |user_following_photos|
        - user_following_photos.each do |photo|
          %tr
            %td
              .p-3.border
                .email #{@users.find(photo.user_id).email}
                %img{:id => "image-#{photo.id}", :src => photo.image(:medium)}
                %h3= photo.title
          - break

步骤2：修改JavaScript实现单图隐藏 #

不需要依赖ID，直接利用事件对象中的this指向当前触发事件的图片元素，这样更简洁高效：

基础版（静态页面） #

$(function() {
    // 给所有图片绑定鼠标悬停事件
    $("img").on("mouseover", function() {
        // 只隐藏当前悬停的图片
        $(this).hide();
    });
});

进阶版（动态加载图片场景） #

如果你的页面会动态新增图片（比如通过AJAX加载），用事件委托绑定到父元素，确保新增元素也能触发事件：

$(function() {
    // 绑定到父元素，监听子元素img的mouseover事件
    $(".centered").on("mouseover", "img", function() {
        $(this).hide();
    });
});

为什么之前的代码无效？ #

• 重复ID：浏览器只会识别第一个id="image"的元素，后续相同ID的元素无法被正确选中。
• 选择器错误：$(id)写法不对，正确的ID选择器应该是$("#" + id)，但就算修正，也只能绑定第一张图片。
• 全局隐藏：$("img").hide()会选中页面所有图片，改用$(this)才能精准操作当前触发事件的元素。

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