我有4个浮动的div,当你将鼠标悬停在div内的A标签上时,div将显示在这4个div的底部,对应于发生点击的div。我已经根据我的知识对JQuery进行了优化,但我只是想知道是否还有其他解决方案。
我的小提琴: http://jsfiddle.net/jonxblaze/PyHH5/
HTML
<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;
}
})
答案 0 :(得分:3)
您还可以使用data
属性来引用相应的div:
$('.wide-full:not(.red)').hide();
$('.promo a').hover(function() {
$('.wide-full').hide().filter('.' + $(this).data('type')).show();
});
为此,我稍微修改了一下HTML:
<a href="#" data-type="yellow">More</a>