Question

我正在创建一个侧面有滚动容器的资源数据库。基本上，当您单击容器中的缩略图时，它将加载将淡入的div的内容并显示该类别的内容。每个div标签看起来像这样：

<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
                        Download
</a>File Desc</p> 
<hr/> 
</div>

并将按此加载：

基本上，我希望能够在此页面上打开另一个类别时显示相同的内容。我有几个不同的类别，并希望能够从Category1，Category2等等中提取代码，以便我可以在“查看全部”选项卡中显示所有这些代码。我试图使用jQuery的加载函数，如下所示：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 
</head>

<body>
 <div id="includedContent"></div>
 <h1>This is why I rule</h1>
</body>
</html>

将原始div中的内容加载到视图所有类别中，但没有显示任何内容。不幸的是，我对Javascript / jQuery的知识非常有限，所以我很难在不同的div中使用相同的内容而不需要复制和粘贴代码。当我添加文件时，这也会在将来出现问题，如果我这样做，则必须编辑代码两次。

提前谢谢！

Answer 1

您可以将内容保存在这样的变量中：

var content = '';
$(document).ready(function(){
  //load first in a div
  $('#includedContent').load('b.html', function(result){
    content = result;
    //from here on, you know you have b.html data in the variable content
    //and you can use it elsewhere like this
    $('#anotherDivId').html(content);
  });
});

Answer 2

如果您在文档中调用您的代码就绪功能将起作用。尝试，

$(document).ready(function(){

    $("#includedContent").load("b.html"); 

});

但是，您可能需要将其保留在visualex建议的某个位置，以便根据需要在多个位置添加内容。

这是一个有效的工作， http://jsfiddle.net/c5SAH/show/

它从中加载内容 http://jsfiddle.net/gfgE8/show/

在单独的Div中加载相同的代码两次

2 个答案: