减少大量子元素

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"); 
});