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>元の周りに a を追加し、関数にそれらを吐き出させました。

楽しい楽しいです。

于 2013-08-30T00:04:40.383 に答える