Question

我有一个带有按钮的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>

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

感谢您的帮助。

Answer 1

使用append()代替text()

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

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

修改

要防止多次追加，请在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...'); });

Answer 2

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

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

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

$("h1").append('your text');

如何在不丢失按钮的情况下使用输入按钮更改h1的文本

2 个答案: