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

我的页面上有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中，

 
Content
 
Content
 
Content
 
Content
 
Content
 
Content 

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

编辑：解决方案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/

Answer 2

正如评论所说，你已经按照使用$(this)点击的形状进行操作……你还没有做任何事情，所以你没有意识到这一点。

许多切换通过向要显示/隐藏的元素添加和删除类来工作。

所以如果你有css：

 .hidden { display:none } .visible { display:block } 

然后你可以通过将visible类添加到被点击的元素来切换可见性，如下所示：

 $(".shape").click(function() { if($(this).hasClass("visible")) { $(this).removeClass("visible"); } else { $(this).addClass("visible"); } }); 

Answer 3

在jQuery中，当你在事件处理程序回调函数中时，’this’关键字指的是触发事件的元素。

因此，在您的示例中，当您单击具有“shape”类的元素时，它将触发回调函数（因为该事件已附加到具有“shape”的所有元素）。 但是在任何给定时间只会触发1个回调，并且该回调将引用启动事件的特定DOM元素（即正确的div）。

它在普通javascript中的工作方式也可以，如果你将一个事件参数传递给你的回调，你可以访问event.target和event.currentTarget属性（它们是相对于被触发事件的DOM元素引用）。 currentTarget通常等于’this’。 https://api.jquery.com/event.currentTarget/

你肯定会在大多数情况下使用它，因为它更简单。 但是在更高级的情况下，this关键字可能通过绑定得到ovverridden，那么event.currentTarget是一个稳定的回退。

 $(".shape").click(function(event) { var whatGotClicked = event.currentTarget; var whatGotClicked = this; //both wor }); 

TL; DR简而言之，你所拥有的将会很好，但我希望你对原因有更深入的了解。

从哪里去？

 $(".shape").click(function() { var id = $(this).attr("id"); var selected = $(id + "-reveal"); //this will give you a jQuery object targeting the selected id of the reveal element selected.toggle(); //at this point you decide, jQuery has alot of helper methods, like slideDown() and slideUp or .animate }); 

https://api.jquery.com/?s=toggle

Answer 4

这是jquery代码，用于警告所单击元素的id

 $('.shape').on('click', function(event) { alert(event.target.id); });