0

这<html>是我要克隆的（并填写 JSON 文件）：

<div id="events" class="alert alert-info text-black">
  <h4>First tutoring session of the year</h4>
  <div>
    <p id="event_p1"><strong>Date:</strong> September 4, 2013</p>
    <p id="event_p2"><strong>More info:</strong> This coming Tuesday MAO will have its first tutoring session of the year.</p>
  </div>   
</div>

现在，这只是我想要的一般结构。这是 JSON 文件（只是前 3 个）：

[
    {
        "id": 2,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    },
    {
        "id": 3,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    },
    {
        "id": 4,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    }
]

最后，这是 javascript：

    var new_event = function(name, date, text, id){
    var events = $("#events").clone();

    $(events).attr('id',id)
    $(events).find('h4').html(name);
    $(events).find('#event_p1').html(date);
    $(events).find('#event_p2').html(text);

    return events;
  }

  var copy_div = function(){  }

  var loadEvents = function(d){
    $.each(d, function(i){
      var id = "event_" + i;
      var name = "<h4>" +d[i].titl + "</h4>";
      var date = "<p><storng>Date: </strong>" + d[i].date + "</p>";
      var text = "<p><strong>More info: </strong>" + d[i].stuff + "</p>";

      $("#events").append(new_event(name,date,text,id));
    })
  }
    //retrieves the appropriate events JSON file
    $.getJSON('data/events.json', loadEvents);
    copy_div();

目标是将 JSON 文件中的数据加载到我上面链接的 html 克隆的适当位置。出于某种原因，它不断将 div 加载到另一个内部，看起来像这个。

注意它们是如何无休止地相互放进去的。

4

1 回答 1

0

看来我已经解决了。糟糕，愚蠢的错误。

如果您在上面看，$("#events").append(new_event(name,date,text,id));正在将事件加载到带有 的元素中id="events"，这是我最初克隆的那个。为了让它们作为单独的块加载，该函数需要将它们附加到另一个具有另一个 id 的元素。因此，我<div>在原版周围添加了一个，并让函数将它们吐出。

好玩。

于 2013-08-30T00:04:40.383 回答