jQuery 如何在不丢失按钮的情况下使用输入按钮更改 h1 的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11007023/
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
how to change the text of an h1 with an input button without losing the button
提问by user278859
I have an h1 tag with a button and some text to it's right that only displays after a user action at runtime using CSS and jQuery. When the button is displayed I want to put text next to it in the h1.
我有一个带有按钮的 h1 标签和一些文本，它只在运行时使用 CSS 和 jQuery 的用户操作后显示。当按钮显示时，我想在 h1.h1 中将文本放在它旁边。
The problem is that when I add the text, I lose the button.
问题是当我添加文本时，我丢失了按钮。
The HTML loooks like this...
HTML看起来像这样......
<h1>
<input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">
</h1>
The CSS looks like this...
CSS看起来像这样......
.tabButtonHidden {
visibility: hidden;
}
.tabButtonVisible {
visibility:visible;
}
#newTabButton {
background: rgba(216, 216, 216, 6);
}
h1 {
font: 100% Arial, Arial, Helvetica, sans-serif;
font-size: 1.25em;
font-weight:500;
background: rgba(218, 235, 245, 6);
margin: 0px;
}
The jQuery looks like this...
jQuery 看起来像这样......
if ($("#newTabButton").hasClass("tabButtonHidden")) {
$('#newTabButton').removeClass("tabButtonHidden").addClass("tabButtonVisible");
}
$('h1').text('Now is the time for all good men...');
The last line in the jQuery writes the text where the button would normally be. If I remove that last line, change the html to include the text as follows, the jquery works perfectly, except of course that the text is static and always visible...
jQuery 中的最后一行将文本写入按钮通常所在的位置。如果我删除最后一行，将 html 更改为包含如下文本，jquery 可以完美运行，当然，文本是静态的并且始终可见...
<h1>
<input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">Now is the time for all good men...
</h1>
What am I missing? I need to change the text and make it and the button visible all dynamically.
我错过了什么？我需要更改文本并使其和按钮全部动态可见。
Thanks for any help.
谢谢你的帮助。
回答by Eric Fortis
Use append()instead of text()
使用append()代替text()
http://jsfiddle.net/efortis/QSEfv/
http://jsfiddle.net/efortis/QSefv/
$('h1').append('Now is the time for all good men...');?
Edit
编辑
To prevent appending multiple times, append a spaninto the h1and use text()
为防止多次附加，请将 a 附加span到h1并使用text()
See: http://jsfiddle.net/efortis/QSEfv/2/
见：http: //jsfiddle.net/efortis/QSefv/2/
$('h1').append('<span>Now is the time for all good men...</span>');
$('input').on('click', function () {
$('h1 span').text('NEW...');
});?
回答by Isaac Gonzalez
if you want to change the text of your button you may try:
如果您想更改按钮的文本，您可以尝试：
$("#inputTabButton").val('your text');
or if you want to add the text and the button you may try as well:
或者如果您想添加文本和按钮，您也可以尝试：
$("h1").append('your text');
