代码之家 › 专栏 › 技术社区 › Matt Ryan

jQuery委托优化

refactoring optimization jquery

Matt Ryan · 技术社区 · 14 年前

使用delegate()优化以下代码段的最佳方法是什么?

jQuery('.menu').delegate('li.gallery', 'hover', function () { jQuery(this).children('.submenu').toggleClass('hide show'); });
jQuery('.menu').delegate('li.interior', 'hover', function () { jQuery(this).children('.submenu').toggleClass('hide show'); });
jQuery('.menu').delegate('li.exterior', 'hover', function () { jQuery(this).children('.submenu').toggleClass('hide show'); });


<li class="gallery"> 
                    <span>gallery</span> 
                    <ul class="submenu hide"> 
                        <li class="interior"> 
                            <a href="/gallery/interior">Interior</a> 
                            <ul class="submenu hide"> 
                                <li><a href="/gallery/interior?gallery=master-bedroom">Master Bedroom</a></li> 
                                <li><a href="/gallery/interior?gallery=living-room">Living Room</a></li> 
                                <li><a href="/gallery/interior?gallery=dining-room">Dining Room</a></li> 
                                <li><a href="/gallery/interior?gallery=kitchen">Kitchen</a></li> 
                                <li><a href="/gallery/interior?gallery=bathroom">Bathroom</a></li> 
                                <li><a href="/gallery/interior?gallery=foyer">Foyer</a></li> 
                                <li><a href="/gallery/interior?gallery=study">Study</a></li> 
                                <li><a href="/gallery/interior?gallery=sunroom">Sunroom</a></li>                                
                                <li><a href="/gallery/interior?gallery=guest-room">Guest Room</a></li>                                                              
                            </ul> 
                        </li> 
                        <li class="exterior"> 
                            <a href="/gallery/exterior">Exterior</a> 
                            <ul class="submenu hide"> 
                                <li><a href="/gallery/exterior?gallery=landscapes">Landscape</a></li> 
                                <li><a href="/gallery/exterior?gallery=gardens">Gardens</a></li> 
                                <li><a href="/gallery/exterior?gallery=cottages">Cottages</a></li> 
                                <li><a href="/gallery/exterior?gallery=entry-driveway">Entry/Driveway</a></li>                                                                                              
                            </ul> 
                        </li>                       
                    </ul> 
                </li>

1 回复 | 直到 14 年前

Nick Craver 14 年前

你可以用 multiple selector ( , ) .delegate() 选择器参数。

但是,由于 what I would consider a bug in how .delegate() works (关) mouseover / mouseout ,当进入一个孩子时会触发)我会暂时避开它并直接绑定,如下所示:

jQuery('.menu').find('li.gallery, li.interior, li.exterior').hover(function () {
  jQuery(this).children('.submenu').toggleClass('hide show'); 
});