0

このコードを使用して画像の src を変更していますが、機能していません。変数テキスト値フォックスの例を書いている場合：

track = '212';
artist = 'azealea banks';

最後の画像 src のみを変更していますが、この変数の値を隣接するスパンから取得しているとき、まったく機能していません。

私のjQueryコード:

$(function () {
    $(".plimg").attr("src",

    function (index) {
        var title = $(this).next('span.titletrack').text();
        alert(title);
        var array = title.split(' - ');
        var track = array[0];
        var artist = array[1];

        var output;

        $.ajax({
            url: "http://ws.audioscrobbler.com/2.0/?method=track.search",
            data: {
                track: track,
                artist: artist,
                api_key: "ca86a16ce762065a423e20381ccfcdf0",
                format: "json",
                lang: "en",
                limit: 1
            },
            async: false,
            success: function (data) {
                output = data.results.trackmatches.track.image[0]["#text"];
            }

        });
        return output;
    });
});

と HTML

<div id="playlist" class="scrollable" style="height: 300px;overflow-y: auto">
    <li>
        <img src="/img/playlist/33a - Sulis Vardo.jpg">
<span class="titletrack">33a - Sulis Vardo</span>
    </li>
    <li>
        <img class="plimg" src="/img/playlist/33a - Shota.jpg">
        <span onclick="playinToplaylist($(this).html());" class="titletrack">33a - Shota</span>
    </li>
</div>
4

1 に答える 1

2

いくつかの変更を加えました。plimgまず、HTML の最後の画像だけがクラスを持っているため、最後の画像を見つけるだけなので、次のように追加しました。

<div id="playlist" class="scrollable" style="height: 300px;overflow-y: auto">
    <li>
        <img class="plimg"/>
        <span class="titletrack">33a - Sulis Vardo</span>
    </li>
    <li>
        <img class="plimg"/>
        <span onclick="playinToplaylist($(this).html());" class="titletrack">33a - Shota</span>
    </li>
</div>

次に、JavaScript を変更して、画像を反復処理し、画像ソースを非同期で読み込むようにしました。ajax 呼び出しへの応答を確認すると、2 番目の画像に渡された詳細は画像データを返さないため、その画像は読み込まれません。

$(function(){
    $("img.plimg").each(function() {
        var img = $(this);
        var title = img.next("span.titletrack").text();
        var titleDetails = title.split(' - ');
        var track = titleDetails[0];
        var artist = titleDetails[1];

        $.ajax({
            url: "http://ws.audioscrobbler.com/2.0/?method=track.search",
            data: {
                track: track,
                artist: artist,
                api_key: "ca86a16ce762065a423e20381ccfcdf0",
                format: "json",
                lang: "en",
                limit: 1
            },
            async: true,
            success: function (data) {
                var trackData = data.results.trackmatches.track;
                if(!trackData){
                    alert("No track data for " + artist + " / " + track);
                    return;
                }
                var output = trackData.image[0]["#text"];
                img.attr("src", output);
            }
        });            
    });
});

これらの更新を JSFiddle hereに置きました。

于 2013-08-26T08:25:56.393 に答える