小贝子编程

希望优化以下JQuery代码



我有4浮动div，当你悬停在div内的A标签上时，一个div将显示在这4个div的底部，对应于点击发生的div。我已经尽我所能优化了JQuery，但我只是想看看是否有其他的解决方案。

My Fiddle: http://jsfiddle.net/jonxblaze/PyHH5/

<div class="wrap">
<div class="promo red">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><a href="#">More</a></p>
</div> 
<div class="promo yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><a href="#">More</a></p>
</div>    
<div class="promo blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><a href="#">More</a></p>
</div>
 <div class="promo black">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><a href="#">More</a></p>
</div>
<div style="clear:both"></div>   


<div class="red wide-full">RED CONTENTS</div>
<div class="yellow wide-full">YELLOW CONTENTS</div>
<div class="blue wide-full">BLUE CONTENTS</div>
<div class="black wide-full">BLACK CONTENTS</div>
JQuery

$('.yellow.wide-full, .blue.wide-full, .black.wide-full').hide();
$('.promo a').hover( function() {
            var parentDiv = $(this).parents().filter('.promo'),
                wideFull  = $('.wide-full');    
            switch (true) { 
                case parentDiv.hasClass('red'):
                    $('.red.wide-full').show();
                    wideFull.not('.red').hide();
                    break; 
                case parentDiv.hasClass('yellow'):
                    $('.yellow.wide-full').show();
                    wideFull.not('.yellow').hide();
                    break;                  
                case parentDiv.hasClass('blue'):
                    $('.blue.wide-full').show();
                    wideFull.not('.blue').hide();
                    break; 
                case parentDiv.hasClass('black'): 
                    $('.black.wide-full').show();
                    wideFull.not('.black').hide();
                    break;  
            }
        })

您还可以使用data属性来引用相应的div:

$('.wide-full:not(.red)').hide();
$('.promo a').hover(function() {
    $('.wide-full').hide().filter('.' + $(this).data('type')).show();
});
http://jsfiddle.net/PyHH5/3/

我稍微修改了一下HTML:

<a href="#" data-type="yellow">More</a>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium