jQuery:当它们共享相同的CSS类时,如何定位被点击的元素？

Question

我的页面上有3个div元素,每个元素都有一个相同的CSS类".shape"

在我的JS中,我想要定位当前单击".shape",以便使用jQuery slideDown过渡将一些额外的html插入到".shape"的底部.

当你再次点击".shape"时,额外的html将会滑动.

我该如何轻松地做到这一点？是)我有的:

$(".shape").click(function() {
    var id = $(this).attr("id");
    var selected = id + "-reveal";
});

在我的HTML中,

<div class="shape" id="shape1">Content</div>
<div class="hidden" id="shape1-reveal">Content</div>

<div class="shape" id="shape2">Content</div>
<div class="hidden" id="shape2-reveal">Content</div>

<div class="shape" id="shape3">Content</div>
<div class="hidden" id="shape3-reveal">Content</div>

我也不知道如何添加切换+滑动效果.

编辑:解决方案 http://codepen.io/vennsoh/pen/rVjeQy

不确定我编写JS的方式是否是最优雅的方法.

Answer 1

定位单击的元素 $(this)

$(".shape").click(function() {
    var clickedShape = $(this);
});

一旦你有了$(this),你就可以用它来定位里面的元素find().

或者在HTML的情况下,使用next()在形状后找到reveal元素.

一旦你找到正确的元素,你可以slideUp(),slideDown()或slideToggle().

例

$(".shape").click(function() {
    var revealThing = $(this).next();

    revealThing.slideToggle();
});

http://jsfiddle.net/yopp6L22/1/