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/

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