Toggle innerHTML

Toggle innerHTML

本文关键字：innerHTML Toggle      更新时间：2023-09-26

我见过各种各样的例子接近我想要的，但似乎都没有描述我想要的样子。我是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元素内部文本有关的内容都会有所帮助。=）

添加一个可以让您知道展开/折叠状态的类怎么样？

$(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/

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

一点解释：我用三次运算符的乘积设置$("#A1").html()，用它来检查#A1文本的当前值。如果它是+，我将元素的文本设置为-，否则，我将其设置为+。

然而，你说的是"高效"。为此，重要的是要注意，如果你要在同一函数中使用选择器两次或两次以上，你应该将从你给出的选择器中得到的jQuery对象存储在一个变量中，这样你就不必每次都重新运行选择器。这是经过修改的代码：

$(document).ready(function() {
    $(".A1").click(function() {
        var $A1 = $(".A1");
        $(".P1").toggle("slow");
        $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
    });
});

没有办法切换内容。您可以检查$（'.P1'）是否可见，然后根据它更改+/-div。

类似于：

$(document).ready(function() {
    $(".A1").click(function() {
     $(".P1").toggle("slow", function(){
       if($(this).is(':visible'))
           $(".A1").html("-")
       else
           $(".A1").html("+")
     });
   });
});

使用回调函数（.toggle()方法的第二个参数）进行检查将确保在动画完成后进行检查。

Js报价：http://jsfiddle.net/cy8uX/

更短版本的

$(document).ready(function() {
    $(".A1").click(function() {
        var $self = $(this);
        $(".P1").toggle("slow", function  (  ) {
            $self.html( $self.html() == "-" ? "+" : "-");
        });
    })
});

这里有一种方法，它在父级上使用类名和CSS规则，不必更改HTML内容，并处理容器和类，这样您就可以在同一页面中使用以下一段代码：

HTML:

<div class="container expanded">
    <div class="A1">
        <span class="minus">-</span>
        <span class="plus">+</span>
    </div>
    <h2 class="H1">Stuff</h2>
    <div class="P1">
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
    </div>
</div>​

CSS：

.expanded .plus {display:none;}
.collapsed .minus {display: none;}

Javascript：

$(document).ready(function() {
    $(".A1").click(function() {
        $(this).closest(".container")
            .toggleClass("expanded collapsed")
            .find(".P1").slideToggle("slow");
    });
});

​

工作演示：http://jsfiddle.net/jfriend00/MSV4U/

相关文章：