자바 클릭을 기반으로 URL 변경

Question

Soundcloud API를 사용하고 있습니다. 사용자가 노래 또는 밴드 이름을 검색하면 내 페이지가 각 트랙과 연결된 모든 앨범 아트의 결과를 반환합니다. 각 트랙에 "재생"버튼을 삽입했습니다. 그러나, play link ("linky"라는 이름의 var)는 페이지에서 마지막으로 호출 된 트랙을 취하는 것처럼 보입니다. 따라서 모든 "재생"링크는 페이지의 마지막 트랙 만 재생합니다. 각 "재생"링크가 해당 트랙에 연결되도록하려면 어떻게해야합니까? 내 console.log(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); 
       }); 
      }); 
      } 


     } 
    }); 
    }; 

각 트랙에 대한 적절한 다른 URL을 보이고있다. 하지만 재생 버튼은 마지막 트랙을 재생하려고합니다. 내가 어디로 잘못 가고 있니? 어떤 도움을 주셔서 감사합니다!

Answer 1

클로저 값 linky 때문입니다. linky은 클로저 값이므로 마지막으로 할당 된 값을 갖습니다. 당신이

당신은 경우 사용하지 않는 것이 좋습니다 원시 DOM 조작을 혼합있는 콜백 요소의 생성을 이동할 수 있습니다 아약스 성공 콜백 내에서만 사용되기 때문에

같은 문제도 변수 songs 존재 jquery를 사용하고 있습니다. 원시 dom 조작을 제거하여 jQuery를 사용하도록 코드를 다시 작성하려고했습니다. 내가 너무 많은 그것을

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 + '" />'); 
      } 
     }) 
    }); 
};