如何使用 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) {&nbsp; &nbsp; $(this).toggleClass('isActive');});

Answer 2

如果您想要切换行为，请将 JS 代码更改为以下内容：$(document).ready(function() {&nbsp; &nbsp; $(".collapse").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parents().next(".guide-content").toggle();&nbsp; &nbsp; &nbsp; &nbsp; if($(this).text() == "+"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text("-");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text("+");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });});每次单击时，如果文本为“-”，则文本将更改为“+”；如果文本为“+”，则文本将更改为“-”。

Answer 3

我不完全确定您的意图，但一种策略是仅使用两个元素，其中一个元素隐藏并切换两者：$(document).ready(function() {&nbsp; $(".guide-collapse").click(function() {&nbsp; &nbsp; $(this).find('h2 span').toggle();&nbsp; &nbsp; $(this).find('.guide-content').slideToggle();&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="guide-collapse">&nbsp; <div class="guide-title">&nbsp; &nbsp; <h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>&nbsp; </div>&nbsp; <div class="guide-content" style="display: none;">Guide content here.</div></div><div class="guide-collapse">&nbsp; <div class="guide-title">&nbsp; &nbsp; <h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>&nbsp; </div>&nbsp; <div class="guide-content" style="display: none;">Guide content here.</div></div>