Javascript jQuery：当单击的元素共享同一个CSS类时，我如何定位它们？

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

在我的JS中，我希望以当前的click“.shape”为目标，这样一些额外的html将通过jQuery slideDown转换插入到“.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>

内容
内容
内容
内容
内容
内容

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

编辑： 解决方案

---

我不确定我写JS的方式是否是最优雅的方式。

正如评论所说，您已经在使用

$（this）

点击的形状上操作了。。。你只是还没做什么，所以你没有意识到

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

所以如果你有：

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

然后，您可以通过向单击的元素添加

visible

类来切换可见性，如下所示：

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

---

用

$（this）

一旦您拥有了

$（this）

，您就可以使用将其内部的元素作为目标

或者，对于HTML，使用在形状后定位显示元素

一旦找到合适的元素，就可以，或

例子

---

在jQuery中，当您在事件处理程序回调函数中时，“this”关键字指触发事件的元素

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

它在普通javascript中的工作方式也是一样的，如果将事件参数传递给回调，则可以访问event.target和event.currentTarget属性（它们是相对于触发事件的DOM元素引用）。currentTarget通常等于“this”。

我相信你大部分时间都会用到这个，因为它更简单。但在更高级的情况下，如果this关键字被ovverridden（可能是通过绑定）删除，则event.currentTarget是一个稳定的回退

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

TL；简言之，你所拥有的一切将很好地发挥作用，但我希望你能更好地理解其中的原因

从那里去哪里

$(".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
});

---

以下是jquery代码，用于提醒已单击元素的id

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

---

嗯，

$（this）

已经有了clicked元素。或者它应该是。

$（这）

在您的点击处理程序中，代码将以点击的div为目标。

.on（）

取代了几年前的

.bind（）。而且
这个.id
应该足够了。是的，确实感谢您纠正了这一点，只是尝试了一下，它与绑定一起工作。无论如何，现在编辑我的答案。：）像这样的事情很愚蠢吗$（this）.next（）.toggle（）.next（）.toggle（）；因为我想展示的HTML内容是两个独立的块，其中包含一个隐藏的类。我无法将2封装在一个div中并仅显示/隐藏1个div。div无法在表中工作。$（this）.nextUntil（“.table details:nth child（2）”）.toggle（）；试过了，但没用。“.table details”是我添加到中的一个类，这里的内容非常好，但是如果需要，也可以使用.nextAll（）（）来实现同样的功能：这太棒了。又有新东西了。基本过滤：谢谢！你太棒了。
$(".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
});

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