2

jQuery と JavaScript は初めてなので、ご容赦ください。AJAX get リクエストを実行して、トラック情報を含む JSON ファイルを取得しようとしています。このファイルは次のようにフォーマットされています。

[
    {
        "name" : "Short Skirt, Long Jacket",
        "artist" : "Cake",
        "album" : "Comfort Eagle",
        "genre" : "Rock",
        "year" : 2001,
        "albumCoverURL" : "images/ComfortEagle.jpg",
        "bandWebsiteURL" : "http://www.cakemusic.com"
    },
    {
        ...
    }
]

私はこれらの2つの機能でこれをやろうとしています:

function loadJSON () 
{
    $.getJSON("lab4.json", updateHTML(result));
}

$(document).ready(function () 
{
    $("site").click(function () 
    {
        loadJSON();
    });
});

ユーザーが ID "site" のリンクをクリックすると、JSON ファイルを取得するために非同期の JavaScript 呼び出しを送信したいと考えています。成功すると、ここで updateHTML 関数を呼び出す必要があります。

function updateHTML (result)
{
    var templateNode = document.getElementById("song-template").cloneNode(true);
    document.removeChild(getElementById("song-template"));

    $.each(result, function(i, song)
    {
        var songNode = templateNode.cloneNode(true);
    });
}

さて、ここで私は立ち往生しています: この複製されたノードができたので、jQuery を使用して HTML のすべてのフィールドに入力するにはどうすればよいですか?

<a id="site" href="#"><img id="coverart" src="noalbum.png" /></a>
<h1 id="title"></h1>
<h2 id="artist"></h2>
<h2 id="album"></h2>
<p id="date"></p>
<ul id="genres"></ul>

通常、私は次のように行きます：

$("site").attr("src","images/ComfortEagle.jpg");

しかし今、私は2つの問題に直面しています。1 つ目は、「曲」として読み込んだ JSON オブジェクトから新しい URL を取得する方法です。2 つ目は、複製したノード内の「サイト」ID をターゲットにしてから、ドキュメントの html に戻す方法です。 ? ありがとう！

4

2 に答える 2

0

まず、jquery を使用する場合は、jquery を使用します。

これを行うには、js cloneNode ではなく ejquery clone() メソッドを使用できます。

このフィドルを見る

これは、よりjqueryっぽいソリューションでやろうとしていることだと思います。

var song = [1,2,3,4];

var templateNode = $("#lala");
$.each(song, function(key, val){
   var songNode = templateNode.clone(true);
    songNode.children('span.yo').text(val);
    $('#wrap').append(songNode);
});

json の解析と同様に、反復ごとに、他の json と同じように props にアクセスできる必要があるため、各ループでは、次のような props をターゲットにするだけです。

song.albumCoverURL
于 2013-10-10T19:35:08.413 に答える