0

我正在使用 Soundcloud API。用户搜索歌曲或乐队名称，我的页面返回与每首曲目关联的所有专辑封面的输出。我为每首曲目插入了一个“播放”按钮；但是，播放链接（名为“linky”的变量）似乎只占用页面上最后一个调用的轨道。所以每个“播放”链接只会播放页面上的最后一首曲目。如何使每个“播放”链接链接到相应的曲目？

  SC.initialize({
    client_id: 'xxxxeditedforprivacyxxxx'
  });

  function doSearch() {

    var searchTerm = document.getElementById('search').value;

    // Search soundcloud for artists
    SC.get('/tracks', { q: searchTerm}, function(tracks) {
      for(track in tracks) {

        var img = document.createElement('img');
        img.setAttribute("src", (tracks[track]["artwork_url"]));
        var title = tracks[track].title.replace("'", "\\\'").replace("\"", "\\\"");

        var song = document.createElement('div');

        linky = tracks[track].permalink_url;

        img.setAttribute("onclick", "showTrackInfo('" + title + "\\n" + "\\n" + tracks[track].label_name + "\\n\\n" + "(click to close)" + "')"); 



        if (tracks[track]["artwork_url"] == null) {
          console.log(""); } 
          else { 

            var Catalog = document.getElementById('catalog');
            Catalog.appendChild(img);


            $('div#catalog').append('<img src="http://i.imgur.com/rGdvfl7.png" id="play">');

            console.log(linky);

            $('img#play').click(function() {
              $.get(
                'http://soundcloud.com/oembed?' + 
                'url=' + linky + 
                '&format=json&maxheight=296'
                )
              .done(function (response) {
                song.innerHTML = response.html;
                document.getElementById("soundiframe").appendChild(song);
              });
            });
          }


      }
    });
  };

我console.log(linky); 正在为每个曲目显示适当的不同 URL。但是播放按钮只想播放最后一个被拉出的曲目。我哪里错了？任何帮助表示赞赏！

4

1 回答 1

0

这是因为闭包值linky。由于linky是一个闭包值，它将具有最后分配的值。

变量也存在相同的问题songs，因为它仅在 ajax 成功回调中使用，您可以将元素的创建移动到回调中

如果您使用 jquery，则不建议使用混合原始 dom 操作。我试图通过删除原始 dom 操作来重写代码以使用 jQuery。

另外，您正在创建一些 dom 元素img，例如Catelog从未添加到 dom 中的元素，因此我将其删除

SC.initialize({
    client_id: 'xxxxeditedforprivacyxxxx'
});

$(function(){
    $('#catalog').on('click', '.play', function(){
        $.get(
            'http://soundcloud.com/oembed',{
                format:'json',
                maxheight:'296',
                url:$(this).data('linky')
            }
        ).done(function (response) {
            $("#soundiframe").append('<div>' + response.html + '</div>');
        });
    })
})

function doSearch() {

    var searchTerm = document.getElementById('search').value;

    // Search soundcloud for artists
    SC.get('/tracks', { q: searchTerm}, function(tracks) {

        $.each(tracks, function(key, track){
            if (track.artwork_url) {
                $('#catalog').append('<img src="http://i.imgur.com/rGdvfl7.png" class="play" data-linky="' + track.permalink_url + '" />');
            }
        })
    });
};
于 2013-04-29T02:48:58.277 回答