Question

我制作一个按钮只是为了显示一个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）。我知道为什么会这样，但我不知道如何解决它。

我提前感谢你。

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/

jQuery为多个按钮和div工作

2 个答案: