从外部页面将数据加载到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);


});

我想使用来自文件content.html的类信息将数据动态加载到该div，因此我尝试使用url-data属性，但是问题既不是控制台显示任何错误也不显示数据。 我知道我可以直接将数据放在div中，但问题是数据随着id的变化而不断变化。 这是我的content.html，我正试图从中将数据加载到div类中。 Content.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>

我想将content.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) ) );