Question

我使用了很多带有100个子元素的父div容器，有些甚至有500个孩子。

<div id="px">
<div> icon1 </div>
<div> icon2 </div>
... +98
</div>

<div id="content">
<div> images, text.. etc </div>
<div> images, text.. etc </div>
... +98
</div>

我这样做的原因是我可以使用1个单个jquery代码为每个子元素指定一个mouseenter事件，然后根据该子选择显示一些内容：

$("#px >").mouseenter(function() {

index = (this).index();    

$("#content :eq("+index+")").css("display","block"); });

有没有更好的方法来做到这一点或减少这需要的标记/ CSS？因为我的html和css将会非常漫长并且可能表现得很糟糕。

Answer 1

假设您可以更改正在生成的标记，我建议使用以下数据属性呈现标记：

<div id="px">
<div class="icon" data-target="icon1-tgt"> icon1 </div>
<div class="icon" data-target="icon2-tgt"> icon2 </div>
... +98
</div>

<div id="content">
<div id="icon1-tgt"> images, text.. etc </div>
<div id="icon2-tgt"> images, text.. etc </div>
... +98
</div>

并将js处理程序更改为以下版本：请注意，我已使用on进行事件绑定，它减少了绑定的事件侦听器数量。查看http://24ways.org/2011/your-jquery-now-with-less-suck/

的“活动委派”部分

$("#px").on("mouseenter", "div.icon", function(evt) {
    var target = $(this).data("target");
    $("#" + target).css("display","block"); 
});

减少大量的子元素

1 个答案: