Question

我有多个自举手风琴的代码，当有人单击卡头时，我希望在手风琴打开时旋转特定头中的图标。

<div class="accordion" id="a">
   <div class="card">    
      <a class="card-header" role="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="false" aria-controls="collapseone">
         <div class="font-weight-bold"><span class="plus"><i class="fas fa-plus"></i></span>&nbsp;a</div>
      </a>

<div class="accordion" id="b">
   <div class="card">    
      <a class="card-header" role="button" data-toggle="collapse" data-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
         <div class="font-weight-bold"><span class="plus"><i class="fas fa-plus"></i></span>&nbsp;a</div>
      </a>

我有一堂课可以旋转

.rotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

我不确定如何仅选择单击的标题，而不将旋转应用于所有标题。

例如，即使没有单击，也会旋转每个标题中的所有图标。

$(".card-header").click(function(e) {
    $(".plus").toggleClass("rotate");
});

我试图使用“ this”来获取被点击的元素，但是后来我不知道如何在plus类上切换toggle旋转。 Toggleclass在“ this”上旋转会旋转整个标题，而不仅仅是我想要的图标。

也许这就是我的html结构化方式，但我对jquery并不十分熟悉。

Answer 1

由于您在父级上注册了点击处理程序，因此this会这样做：

$(".card-header").click(function(e) {
    $(".plus", this).toggleClass("rotate");
});

说明：jQuery选择器语法的第二个（可选）参数是要查看的父级，默认为window对象。在您的示例中，this是您单击的类为"card-header"的DOM元素。

因此，$(".plus", this)将定位在单击的.plus中找到的所有.card-header元素。

如果事件不是绑定到.plus的父级上，而是绑定到同级.card-header的父级中，则必须使用{{1 }}，并将其作为选择器的第二个参数传递。示例：

.closest()

<div class="card-header">
  <span class="plus">
    <i class="fas fa-plus"></i>
  </span>
  <span class="sibling-trigger">Test</span>
</div>

Answer 2

您可以使用find（）函数：

$(this).find('.plus').toggleClass('rotate')

Answer 3

通过使用“ this”获取被单击的元素，您可以找到正确的想法。尝试看一下.find()方法，该方法将允许您通过CSS选择器找到被单击元素的子元素。

$(".card-header").click(function(e) {
    $(this).find(".plus")
           .toggleClass("rotate");
});

获取click元素，然后在该元素内的另一个类上运行切换类

3 个答案: