1

我对几个块的 jquery 效果有疑问。Mouseenter 和 mouseleave 仅在第一个 div 块上起作用,而在所有其他块上不起作用。

这是JS:

$(文档).ready(函数() {

     $('#mainbox').mouseenter(
         功能 () {
           $('#infobox').fadeIn();
         });
     $('#mainbox').mouseleave(
         功能 () {
           $('#infobox').fadeOut();
         });

   });

还有块:

<div id="mainbox"><div id="infobox" style="display: none;">first block - it works on      this one</div></div>

<div id="mainbox"><div id="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div id="mainbox"><div id="infobox" style="display: none;">3rd block - it doesn't work</div></div>

你们有什么想法是什么问题吗?

4

2 回答 2

2

问题是:该选择器仅针对文档中第一个主框中的第一个信息框。

API中,您可以阅读:

每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID,则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是,不应依赖此行为;具有多个使用相同 ID 的元素的文档无效。

这就是您的代码无法正常工作的原因。

提示:将 id 切换到类并绑定鼠标事件以在 div 内进行搜索,例如:

$('.mainbox').mouseenter(
  function () {
    $(this).find('.infobox').fadeIn();
  }); 

$('.mainbox').mouseleave(
  function () {
    $(this).find('.infobox').fadeOut();
});
于 2013-02-01T14:54:40.473 回答
0

将 id 更改为类:

<div class="mainbox"><div class="infobox" style="display: none;">first block - it works on      this one</div></div>


<div class="mainbox"><div class="infobox" style="display: none;">2nd block - it doesn't work/div></div>

<div class="mainbox"><div class="infobox" style="display: none;">3rd block - it doesn't work</div></div>

然后在 JS 中:

$(document).ready(function() {

 $('.mainbox').mouseenter(
     function () {
       $(this).find('.infobox').fadeIn();
     }); 
 $('.mainbox').mouseleave(
     function () {
       $(this).find('.infobox').fadeOut();
     });
});
于 2013-02-01T14:53:11.733 回答