如何使用 jQuery 切换加号和减号图标？

Question

我想切换guide-contentdiv 并将+图标更改为-图标，然后再次更改-为+图标。为此，我有这个 jQuery 和 HTML：$(document).ready(function() {  $(".collapse").click(function() {    $(this).parents().next(".guide-content").toggle();    $(this).text("+");  }, function() {    $(this).text("-");    $(this).parents().next(".guide-content").toggle();  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="guide-collapse">  <div class="guide-title">    <h2>アンティーク着物について <span class="collapse">+</span></h2>  </div>  <div class="guide-content">  </div></div><div class="guide-collapse">  <div class="guide-title">    <h2>アンティーク着物について <span class="collapse">+</span></h2>  </div>  <div class="guide-content">  </div></div>但它并没有将图标从 + 更改为 - 以及 - 更改为 +。

Answer 1

我会使用 CSS 根据类来切换它。

这将允许您使用图标来获得更多细节和灵活性。

$('body').on('click', '.collapse', function(event) {

    $(this).toggleClass('isActive');

});

Answer 2

如果您想要切换行为，请将 JS 代码更改为以下内容：

$(document).ready(function() {

    $(".collapse").click(function() {

        $(this).parents().next(".guide-content").toggle();

        if($(this).text() == "+"){

            $(this).text("-");

        }

        else {

          $(this).text("+");

        }

        

    });

});

每次单击时，如果文本为“-”，则文本将更改为“+”；如果文本为“+”，则文本将更改为“-”。

Answer 3

我不完全确定您的意图，但一种策略是仅使用两个元素，其中一个元素隐藏并切换两者：

$(document).ready(function() {

  $(".guide-collapse").click(function() {

    $(this).find('h2 span').toggle();

    $(this).find('.guide-content').slideToggle();

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="guide-collapse">

  <div class="guide-title">

    <h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>

  </div>

  <div class="guide-content" style="display: none;">Guide content here.</div>

</div>

<div class="guide-collapse">

  <div class="guide-title">

    <h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>

  </div>

  <div class="guide-content" style="display: none;">Guide content here.</div>

</div>