无法逆转 jQuery 效果

Question

您好，我需要帮助，这个脚本可以按我的意愿工作

jQuery('[href*="#'+divone+'"]').find("span").removeClass("fa fa-plus").addClass("fa fa-minus"); 

但在此之后，我想要 VICE- 反之亦然 在一次单击上工作在另一次单击替换类我尝试过切换类也不起作用请帮忙

<div class="wpsm_panel wpsm_panel-default">
  <div class="wpsm_panel-heading" role="tab">
    <h4 class="wpsm_panel-title">
      <a class="collapsed" data-toggle="collapse" data-parent="" href="#ac_155_collapse6" aria-expanded="false">
        <span class="ac_open_cl_icon fa-minus fa"></span>
        <span class="ac_title_class fa-minus fa">
          <span style="margin-right:6px;" class="fa-minus fa"></span>
          <span style="margin-right:6px;" class="fa-minus fa"></span>
          <p>this is the question?</p>
          <p></p>
        </span>
      </a>
    </h4>
  </div>
  <div id="ac_155_collapse6" class="wpsm_panel-collapse collapse" style="display: block; height: 0px;" aria-expanded="false">
    <div class="wpsm_panel-body">this is answer </div>
  </div>
</div>

Answer 1

toggleClass()完全符合您的需求，并且应该可以正常工作：

var divone = 'ac_155_collapse6';
jQuery('[href*="#' + divone + '"]').find("span").toggleClass("fa-plus fa-minus");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="wpsm_panel wpsm_panel-default">
  <div class="wpsm_panel-heading" role="tab">
    <h4 class="wpsm_panel-title">
      <a class="collapsed" data-toggle="collapse" data-parent="" href="#ac_155_collapse6" aria-expanded="false">
        <span class="ac_open_cl_icon fa-minus fa"></span>
        <span class="ac_title_class fa-minus fa">
          <span style="margin-right:6px;" class="fa-minus fa"></span>
        <span style="margin-right:6px;" class="fa-minus fa"></span>
        <p>this is the question?</p>
        <p></p>
        </span>
      </a>
    </h4>
  </div>
  <div id="ac_155_collapse6" class="wpsm_panel-collapse collapse" style="display: block; height: 0px;" aria-expanded="false">
    <div class="wpsm_panel-body">this is answer </div>
  </div>
</div>

请注意，无需在列表中包含.fa，因为只需将其删除，然后将其重新添加到原始代码中即可。

Answer 2

您可以在那里使用全局 js var，每次用户单击元素时，该变量都会从两个值更改。这样，您可以知道必须运行哪种情况，并交换元素上的类。像这样：

var classFlag = 0;
$('...').click(function() {
    if (classFlag == 0) {
        jQuery('[href*="#'+divone+'"]').find("span").removeClass("fa fa-plus").addClass("fa fa-minus");
        classFlag = 1;
    }
    else {
        jQuery('[href*="#'+divone+'"]').find("span").removeClass("fa fa-minus").addClass("fa fa-plus");
        classFlag = 0;
    }
});