使用jQuery为多个相同id的div绑定hover事件仅第一个生效如何解决

问题原因 #

HTML 规范要求同一个页面内 id 属性必须唯一，重复 id 属于非法结构。jQuery 用 ID 选择器$("#title")、$("#source")时，只会返回页面中第一个匹配的元素，所以你写的事件只会绑定到第一个id="title"的 div，触发时也只会显示第一个id="source"的内容。

解决方案 #

优先把重复的 id 改为 class，符合规范的同时也能实现需求：

1. 修改HTML结构 #

把原来的id="title"改为class="title"，id="source"改为class="source"：

<div class="title col-md-3">
     <div class="source" style="display:none">Hidden Text</div>
</div>
<div class="title col-md-3">
     <div class="source" style="display:none">Hidden Text</div>
</div>
<div class="title col-md-3">
     <div class="source" style="display:none">Hidden Text</div>
</div>

2. 修改JS逻辑 #

用类选择器绑定事件，触发时通过$(this)定位当前被 hover 的元素，再查找它内部的隐藏层：

<script>
$(document).ready(function(){
    // 给所有.title绑定事件
    $(".title").mouseenter(function(){
        // 找当前hover的.title内部的.source
        $(this).find(".source").fadeIn( 200 );
    });

    $(".title").mouseleave(function(){
        $(this).find(".source").fadeOut( 200 );
    });
});
</script>

不推荐的兼容方案 #

如果因为特殊原因不能修改 id 属性，可以用属性选择器匹配所有同 id 元素，但不符合规范，不建议长期使用：

$(document).ready(function(){
    $("[id='title']").mouseenter(function(){
        $(this).find("[id='source']").fadeIn( 200 );
    });
    $("[id='title']").mouseleave(function(){
        $(this).find("[id='source']").fadeOut( 200 );
    });
});

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