jQuery - 如果没有元素被调用？

Question

我已经在那里，如果你将鼠标悬停在一个certin元素的脚本，将显示一个独特的DIV，和其他人隐藏...很简单...

在页面加载，我叫一个div的“前奏”所示的div ....

什么我要完成，如果是其他的5个元素不被上空盘旋，它显示的前奏格...

所以，基本上是外行的话说：

show intro div if mouseover this div class，show this div ID if if not intro div。

这里是我使用至今：

$(document).ready(function() { 

$('.intro').show(); 

$('li.members, li.members-active').hover(function() { 
    $('.members-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 



$('li.brokers, li.brokers-active').hover(function() { 
    $('.brokers-show').show(); 
    $('.members-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.providers, li.providers-active').hover(function() { 
    $('.providers-show').show(); 
    $('.brokers-show').hide(); 
    $('.members-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.employers, li.employers-active').hover(function() { 
    $('.employers-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.members-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.seniors, li.seniors-active').hover(function() { 
    $('.seniors-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.members-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

}); 

Answer 1

可以显著简化此：

$(document).ready(function() { 

    $('.intro').show(); // Show the intro by default 
          // Ideally, you'd skip this step and just make sure 
          // the intro was visible on load anyway 

    $('li').hover(function() { // Bind an event handler to every item you want to toggle    
     var associatedDivClass = $(this).attr('class').replace('-active', '-show'); 
     $('.' + associatedDivClass).show(); 
     $('.intro').hide(); 
    }); 
    $('li').mouseout(function() { 
     var associatedDivClass = $(this).attr('class').replace('-active', '-show'); 
     $('.' + associatedDivClass).hide(); 
     $('.intro').show(); 
    }); 

}); 

限制“礼”选择的需要，所以你只是针对你想要的物品切换。