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(); 
    }); 

}); 

限制「禮」選擇的需要，所以你只是針對你想要的物品切換。