从外部页面加载 div 中的数据

Question

Info.html

var Element = function ( id, w, h, position, rotation ) {
var html = [
'<div class="wrapper"  width="' + w + '" height="' + h + '"  >',
'<ul class="stage clearfix">',
'<li class="scene" id="' + id + '">',
'<div class="movie i1" id="attacker"  >'
'<div class="poster">',
'</div>',
'<div class="info" url-data="' + id + '">',
'</div>',
'</div>',
'</li>',
'</ul>',
'</div>'
].join('n');
var div = document.createElement('div');
$(div).html(html);
}
function init() {
var group = new THREE.Group();
var str = {"0":'http://localhost/liberate/threeee/PAGES/Information/content.html'
}
for ( var i = 0; i < totalSpheres; i ++ ) {
var xp = centerX + Math.sin(startRadians) * circleRadius;
var zp = centerZ + Math.cos(startRadians) * circleRadius;
group.add( new Element( str[i], 1000, 1000, new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) );
startRadians += incrementRadians;
particles.push(group);
}
scene.add(group);

});

我想使用文件内容中的类信息将数据动态加载到此div .html 所以我尝试使用 url-data 属性，但问题是控制台既不显示任何错误，也不显示数据。我知道我可以直接将数据放在div 中，但问题是数据随着 id 的变化而不断变化。 这是我的内容.html我正在尝试将数据加载到类div 中。 内容.html

<header>
<h1>It's a Wonderful Life</h1>
<span class="year">1946</span>
<span class="rating">PG</span>
<span class="duration">130 minutes</span>
</header>
<p>
In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. 
Clarence Odbody, Angel Second Class, is assigned to visit Earth to save 
George, thereby earning his wings. Franklin and Joseph, the head angels, 
review George's life with Clarence.
</p>

我想将数据放在内容中.html直接放入类信息中。

Answer 1

只需将 var str 更改为：

var str = {
"attacker":$.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/content.html",
success: function (data) {      
console.log(data);
$("#attacker").append(data)
}}),
"defender":$.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/defender.html",
success: function (data) {      
console.log(data);
$("#defender").append(data)
}}),
"goalkeeper" : $.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/content.html",
success: function (data) {      
console.log(data);
$("#goalkeeper").append(data)
}}),
"midfielder":$.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/midfielder.html",
success: function (data) {      
console.log(data);
$("#midfielder").append(data)
}})

}
var allKeys = Object.keys(str);   // obtain keys

将键和值传递给元素函数：

group.add( new Element( allKeys[i], str[i], new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) );