jQuery爲多個按鈕和div工作

Question

我在製作按鈕時只顯示一個div而不是全部都有些麻煩。

這裏是我的JS代碼：

$('.show_avatar').click(function(){ 
$('.avatar').toggle('slow',function() { 
    }); 
}); 

這裏是我的HTML：

<input class="show_avatar" type="button" value="Show"></input> 
    <div class="avatar" style="display:none" class="text-center"> 
     <%= image_tag d.avatar.url(:medium) %> 
    </div> 

我的HTML是一個循環，所以它產生多個圖像多個按鈕。當我點擊任意的按鈕（.show_avatar）時，所有的div都會出現（.avatar）。我知道爲什麼會發生這種情況，但我不知道如何解決。

我提前感謝你。

Answer 1

Demo

，而無需指定的HTML的任何變化，你想要的目標即是.avatar你單擊該按鈕後的第一場比賽的元素。您可以使用next()。

$('.show_avatar').click(function(){ 
    $(this).next('.avatar').toggle('slow',function() { 
    }); 
}); 

Answer 2

你可以在一個包裝

<div class="wrap"> 
    <input class="show_avatar" type="button" value="Show"></input> 
    <div class="avatar" style="display:none" class="text-center"> 
     <img src="http://placehold.it/150x150"> 
    </div> 
</div> 

包裝每個並將其更改爲只調用它的兄弟姐妹：

$('.show_avatar').click(function(){ 
$(this).siblings('.avatar').toggle('slow',function() { 
    }) 
}); 

http://jsfiddle.net/e629orfb/