Глядя на оптимизацию следующего кода JQuery

Question

У меня есть 4 плавающих divs, когда вы наводите курсор на тег A внутри divs, div появится в нижней части этих 4 divs, что соответствует div, где был нажат щелчок. Я оптимизировал JQuery, насколько мне известно, но я просто хотел посмотреть, есть ли там другие решения.

Мои Fiddle: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; 
      } 
     }) 

Answer 1

Вы также можете сделать использование data атрибутов для ссылки на соответствующие дивы:

$('.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>