Question

友

我有一个简单的页面。我有一个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>

然后我有一个div，它通过JQuery绑定到一个click函数。单击时，它会将#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

尝试加载它...但无济于事。

当我第一次编写它以从p标签中抓取文本，最小化它，然后再将其放大时，这非常有效。 E.g：

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。我很想学习正确的方法！

非常感谢所有继续帮助的朋友。

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

JQuery加载变量将html存储到div中

1 个答案: