影響其他元素當前外部元件

Question

<div class="test"> 
<button>Example</button> 
<div class="example" style="display:none;">Blah</div> 
</div> 

<div class="test"> 
<button>Example</button> 
<div class="example" style="display:none;">Another</div> 
</div> 

當button被點擊，我想.example到.show，而只是說在目前的.test的.example。

Answer 1

這會對你說什麼：

$('button').click(function(){ 
    $(this).closest('.test').find('.example').show(); 
}); 

這工作太爲您發佈的標記，但它不會工作，如果按鈕和.example沒有兄弟姐妹：

$('button').click(function(){ 
    $(this).siblings('.example').show(); 
}); 

Answer 2

另一種適用於您的特定HTML的方法：

$('button').click(function(){ 
    $(this).next('.example').show(); 
}); 

Answer 3

Hiya 工作演示爲你的情況在這裏：http://jsfiddle.net/4bLZF/

這款採用slideTogglehttp://api.jquery.com/slideToggle/

代碼

$(document).ready(function() { 

    // Watch for clicks on the "slide" link. 
    $('button').click(function() { 
     $(this).next(".example").slideToggle(400); 
     return false; 
    }); 


});​