1

友達、

私は簡単なページを持っています。変数に格納したいコンテンツ (html) を含む div (#content と呼びましょう) があります。

<div id="content">
   <div id="left">
      <h1>Cool title</h1>
      <p>text</p>
   </div>
   <div id="right">
      <p>more text</p>
   </div>
</div>

次に、JQuery を介してクリック関数にバインドされた div があります。クリックすると、#content の内容を変数 storedHTML に格納し、高さを storedHeight に格納します。次に、#content の高さを 0 に設定し、#content 内の html を削除します。

次に、もう一度クリックすると、高さが格納された高さ、たとえば 200px にアニメーション化されます。また、html を div に再読み込みします。

問題は、html を div にリロードすることにあります。どうすればこれを行うことができますか？私はもう試した：

storedHTML = $('#content').html(); //to store it
$('#content').html(''); //to clear it 
$('#content').html(storedHTML); //to load it back up again

それを読み込もうとします...しかし役に立ちません。

これは、最初に ap タグからテキストを取得し、最小化してから再び拡大するように書いたときに完全に機能しました。例えば：

storedText = $('p#example').text(); //to store it
$('p#example').text(''); //to clear it
$('p#example').text(storedText) //to load it back up again

この html ロードの目的で、.html()、.text()、.data()、.load() を使用してみました。および .html() と .append() の組み合わせ

私は明らかに失敗しています。この div に html (複数の div など) をロードする方法がわかりません。これを行うための適切な方法を学びたいです！

いつもお世話になっているフレンドの皆様、ありがとうございます。

4

1 に答える 1

1

.hide（）と.show（）を使ってみましたか？

$('#content').hide();
$('#content').show();

たくさんの例とドキュメントもここで見ることができます：http： //api.jquery.com/hide/

また、あなたのアプローチは最善ではありませんが、それでも機能するはずです。なぜ問題が発生しているのかわかりませんが、以下のコードは問題なく機能しました。

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
</head>
<body>
<div id="content">
   <div id="left">
      <h1>Cool title</h1>
      <p>text</p>
   </div>
   <div id="right">
      <p>more text</p>
   </div>
</div>

<input type="button" value="Hide" onclick="hideContent()" />
<input type="button" value="Show" onclick="showContent()" />

</body>
<script type="text/javascript">
    var storedHTML = '';

    function hideContent() {
        storedHTML = $('#content').html();
        $('#content').html('');
    }

    function showContent() {
        $('#content').html(storedHTML);
    }

</script>
</html>
于 2013-03-08T02:11:17.920 に答える