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...');​

編集

複数回の追加を防ぐには、にを追加し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 に答える