用jQuery更改前一个元素的子类的类

Question

我正在尝试在单击上进行切换，以更改类（真棒），如下所示：

$( ".expandTrigger" ).click(function() {
    $( ".expand" ).first().toggle( "fast", function() {});

    if ( $( this ).prev().child().is( ".fa-plus-circle" ) ) {
      $('.fa-plus-circle').toggleClass('.fa-minus-circle')
    }

    if ( $( this ).prev().child().is( ".fa-minus-circle" ) ) {
      $('.fa-minus-circle').toggleClass('.fa-plus-circle')
    }
  });

});

我究竟做错了什么？ 我在SO上浏览了几个示例，但没有找到任何可以帮助解决这种情况的示例。 HTML如下：

<a href="#"  class="expandTrigger open" ><i class="fa fa-minus-circle"></i> Some Title Here</a>
              <div class="expand open" >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
                <ul>
                  <li>Cum sociis natoque penatibus et magnis</li>
                  <li>Dis parturient montes, nascetur ridiculus mus</li>
                  <li>Nam fermentum, nulla luctus pharetra</li>
                  <li>Vulputate, felis tellus mollis orci</li>
                  <li>Sed rhoncus sapien nunc eget odio</li>
                </ul>
              </div>

在下面重复此html几次（以具有多个切换部分）。

Answer 1

i元素是expandTrigger元素的子元素，而不是其兄弟姐妹的子元素

$(".expandTrigger").click(function () {
    $(this).next(".expand").toggle("fast", function () {});
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

---

如果要在切换完成后更改班级，则

$(".expandTrigger").click(function () {
    $(this).next('.expand').toggle("fast", function () {
        $(this).prev().find('i').toggleClass('fa-plus-circle fa-minus-circle')
    });
});

演示： 小提琴

Answer 2

如果重复HTML的这个块，你的元素的顺序是A DIV一个div一个div ......所以去前面plus或minus一圈，你必须使用.prev()两次：

$(this).prev().prev().child().toggleClass('fa-plus-circle fa-minus-circle');

代码的另一个问题是，即使您在if正确遍历，也要使用该类更改所有元素的类，而不仅仅是找到的元素。