6

我有一个带有按钮的 h1 标签和一些正确的文本，仅在运行时使用 CSS 和 jQuery 的用户操作后显示。当按钮显示时，我想在 h1 中将文本放在它旁边。

问题是当我添加文本时，我失去了按钮。

HTML看起来像这样......

<h1>
    <input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">
</h1>

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;
}

jQuery看起来像这样......

if ($("#newTabButton").hasClass("tabButtonHidden")) {
   $('#newTabButton').removeClass("tabButtonHidden").addClass("tabButtonVisible");
}

$('h1').text('Now is the time for all good men...');

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>

我错过了什么？我需要更改文本并使其和按钮都动态可见。

谢谢你的帮助。

4

2 回答 2

13

使用append()代替text()

http://jsfiddle.net/efortis/QSEfv/

$('h1').append('Now is the time for all good men...');​

编辑

为防止多次追加，请将 a 追加span到h1并使用text()

见：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...');    
});​
于 2012-06-13T01:21:56.923 回答
1

如果您想更改按钮的文本，您可以尝试：

$("#inputTabButton").val('your text');

或者，如果您想添加文本和按钮，您也可以尝试：

$("h1").append('your text');
于 2012-06-13T01:22:56.603 回答