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

时间:2017-08-16 11:00:16

标签: javascript jquery dom

在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中的数据直接放入类信息中。

1 个答案:

答案 0 :(得分:0)

只需将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) ) );