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

演示：Fiddle

Answer 2

如果重复此HTML块，则您的元素序列为A DIV A DIV A DIV ...因此，要转到上一个plus或minus圈，您必须使用{{ 1}}两次：

.prev()

您的代码的另一个问题是，即使您在$(this).prev().prev().child().toggleClass('fa-plus-circle fa-minus-circle');中正确遍历，您也正在使用该类更改所有元素的类，而不仅仅是您找到的类。

使用jquery更改前一个元素的子类

2 个答案: