1

朋友们，

我有一个简单的页面。我有一个 div（我们称之为#content），其中包含我想要存储到变量中的内容（在 html 中）。

<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。

然后当再次点击时，它会将高度动画化回storedHeight，比如说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() 的组合

我显然失败了。我不知道如何将 html（多个 div 等）加载回这个 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 回答