Question

我正在使用Soundcloud API。用户搜索歌曲或乐队名称，并且我的页面返回与每个曲目相关联的所有专辑封面的输出。我为每首曲目插入了“播放”按钮;但是，播放链接（var名为“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);为每首曲目显示了相应的不同网址。但播放按钮只想播放最后一首曲目。我哪里错了？任何帮助赞赏！

Answer 1

这是因为闭包值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 + '" />');
            }
        })
    });
};

Javascript根据点击更改网址

1 个答案: