Javascript jQuery用于多个按钮和div

我在制作只显示一个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）。我知道为什么会发生这种情况，但我不知道如何修复它

我先谢谢你。

在不需要对给定HTML进行任何更改的情况下，您希望在单击按钮后以第一个匹配

.avatar

的元素为目标。你可以用

---

你可以用包装纸把每一个都包起来

<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>

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