javascript 切换内部HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9694346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle innerHTML
提问by MySQL
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.
我已经看到各种例子接近我正在寻找的东西，但似乎没有一个例子描述了它是我真正想要的。我是 jQuery 的初学者，所以欢迎解释。
I'm looking for this to toggle the innerHTMLfrom -to +. Anyone know of a way to do this, efficiently?
我正在寻找这个来切换innerHTMLfrom-到+。任何人都知道有效地做到这一点的方法吗？
jQuery/JavaScript
jQuery/JavaScript
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html("+");
});
});
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. =)
谢谢，任何与切换 HTML 元素的内部文本有关的事情都会有所帮助。=)
回答by Andrew Whitaker
How about adding a class that will let you know the expanded/collapsed status?
添加一个让您知道展开/折叠状态的类怎么样？
$(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>Example:http://jsfiddle.net/sGxx4/
回答by Paul Bruno
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
});
});
A bit of explanation: I'm setting $("#A1").html()with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.
稍微解释一下：我正在$("#A1").html()使用三级运算符的乘积进行设置，使用它来检查#A1的文本的当前值。如果是+，则将元素的文本设置为-，否则将其设置为+。
However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:
但是，您说的是“有效”。为此，重要的是要注意，如果您打算在同一个函数中使用选择器两次或更多次，您应该将您提供的选择器产生的 jQuery 对象存储在一个变量中，这样您就不必每次都重新运行选择器。这是带有该修改的代码：
$(document).ready(function() {
$(".A1").click(function() {
var $A1 = $(".A1");
$(".P1").toggle("slow");
$A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
});
});
回答by Bruno Gomes
There's no way to toggle content. You could check if the $('.P1') is visible, then changing the +/- div according to that.
没有办法切换内容。您可以检查 $('.P1') 是否可见，然后根据此更改 +/- div。
Something like :
就像是 ：
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow", function(){
if($(this).is(':visible'))
$(".A1").html("-")
else
$(".A1").html("+")
});
});
});
Using a callback function (the second argument of the .toggle()method) to do the check will guarantee that you're checking after the animation is complete.
使用回调函数（该.toggle()方法的第二个参数）进行检查将保证您在动画完成后进行检查。
JsFiddle : http://jsfiddle.net/cy8uX/
JsFiddle：http: //jsfiddle.net/cy8uX/
回答by Torrent Lee
more shorter version
更短的版本
$(document).ready(function() {
$(".A1").click(function() {
var $self = $(this);
$(".P1").toggle("slow", function ( ) {
$self.html( $self.html() == "-" ? "+" : "-");
});
})
});
回答by jfriend00
Here's a way that uses class names on a parent and CSS rules and doesn't have to change the HTML content and works off a container and classes so you could have multiple ones of these in the same page with only this one piece of code:
这是一种在父级和 CSS 规则上使用类名的方法，并且不必更改 HTML 内容并处理容器和类，因此您可以在同一页面中使用其中的多个类，仅使用这段代码：
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:
CSS：
.expanded .plus {display:none;}
.collapsed .minus {display: none;}
Javascript:
Javascript：
$(document).ready(function() {
$(".A1").click(function() {
$(this).closest(".container")
.toggleClass("expanded collapsed")
.find(".P1").slideToggle("slow");
});
});
?
?
Working demo: http://jsfiddle.net/jfriend00/MSV4U/
