javascript - 切换 innerHTML

Question

我见过各种接近我正在寻找的例子，但似乎没有一个能描述我真正想要的。我是 jQuery 的初学者，所以欢迎解释。

我正在寻找将 innerHTML 从 - 切换到 + 的方法。任何人都知道如何有效地做到这一点？

jQuery/JavaScript

$(document).ready(function() {
            $(".A1").click(function() {
                $(".P1").toggle("slow");
                $(".A1").html("+");
            });
        }); 

HTML

<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

谢谢，任何与切换 HTML 元素的内部文本相关的事情都会有所帮助。 =)

Answer 1

添加一个让您了解展开/折叠状态的类怎么样？

$(document).ready(function() {
  $(".A1").click(function() {
    var $this = $(this);
    $(".P1").toggle("slow")

    $this.toggleClass("expanded");

    if ($this.hasClass("expanded")) {
      $this.html("-");
    } else {
      $this.html("+");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
  Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

示例: http://jsfiddle.net/sGxx4/