切换innerHTML [英] Toggle innerHTML

问题描述

我已经看到各种各样的例子接近我正在寻找的东西，但似乎没有一个例子来描述它究竟是如何我想要的。我是jQuery的初学者，欢迎解释。

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

jQuery / JavaScript

  $（document）.ready（function （）。$ b $（。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'，馅料，好运Stuffy 
< / div> 
  

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

解决方案

如何添加一个可让您知道展开/折叠状态的类？

Html

 < div class =A1 expanded> ;  - < / DIV> 
< h2 class =H1> Stuff< / h2> 
< div class =P1> 
 Stuffy，Stuffy，Stuffed，Stuffen'，馅料，好运Stuffy 
< / div> 
  

JavaScript：

  $（document）.ready（function（）{
 $（。A1）。click（function（）{
 var $ this = $ （this）; 
 $（。P1）。toggle（slow）
 
 $ this.toggleClass（expanded）; 
 
 if $ this.hasClass（expanded））{
 $ this.html（ - ）; 
} else {
 $ this.html（+）; 
 } 
}）; 
}）; 
  

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

I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.

I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?

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>

Thank you, anything relating to switching the inside text of an HTML element shall help. =)

解决方案

How about adding a class that will let you know the expanded/collapsed status?

Html

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

JavaScript:

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

        $this.toggleClass("expanded");

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

Example: http://jsfiddle.net/sGxx4/

这篇关于切换innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！