Soundcloud API에서 중복 데이터를 반환하는 각 루프

Question

Soundcloud API를 사용하여 동일한 페이지에 여러 트랙을 나열하려고합니다.API 참조를 사용하여 올바른 개별 데이터를 가져 오도록 각 DIV를 반복하고 싶습니다. 그러나 그것은 똑같은 데이터를 각 div에 가져옵니다 (같은 삽화, 같은 오디오 등). /tracks API ID 참조에 대한 변수의 콘솔 로그를 작성하면 각 div를 올바르게 루프하고 다른 ID를 올바르게 나열합니다. 올바른 ID를 가져온 다음 중복 데이터를 가져 오는 이유는 무엇입니까?

$(document).ready(function() { 

    // Loop over each mix 
    $(".mix").each(function(){ 

    // Set the mix ID as a variable 
    var mixID = $(this).data("mix"); 

    // Test it's getting correct unique track ID's 
    console.log($(this).data("mix")); 

    // Get the track meta data 
    SC.get('/tracks/'+mixID+'', function(track) { 
     var artwork = track.artwork_url; 
     var artwork = artwork.replace('-large', '-t500x500'); 

     $(".mix__user").html(track.user.username).attr("href", track.user.permalink_url); 
     $(".mix__artwork").attr("src", artwork); 
     $(".mix__waveform").attr("src", track.waveform_url); 
    }); 

    // Stream the track 
    SC.stream('/tracks/'+mixID+'', function(sound) { 

    var is_playing = false; 

    // Track controls 
    $('.mix__control').click(function(e) { 
     e.preventDefault(); 

     if(is_playing === false){ 
      sound.start(); 
      is_playing = true; 
      $(this).toggleClass("is_playing").html("Pause"); 

     } else if (is_playing === true) { 
      sound.pause(); 
      is_playing = false; 
      $(this).toggleClass("is_playing").html("Play"); 
     } 
    }); 
    }); 
}); 
}); 

은 HTML의 일부 공예 CMS 템플릿 언어가있다.

{% for entry in craft.entries.section('mix') %} 
    <article class="mix" data-mix="{{ entry.mixId }}"> 

    <div class="mix-meta"> 
      <button class="mix__control ss-icon">Play</button> 
      <img class="mix__artwork" src="">   
     <img class="mix__waveform" src=""> 
     </div> 

     <a href="{{ entry.url}}" class="mix-wrap"> 
     <h1 class="mix__title">{{ entry.title }}</h1> 
     <time class="mix__date" datetime="2008-02-14 20:00">{{ entry.postDate.format('d F Y') }}</time> 

     <ol class="mix__tracklist"> 
     {% for block in entry.tracklisting %} 
      {% if block.type == "tracklist" %} 
       <li><span class="mix__artist">{{ block.artist }}</span> - <span class="mix__track">{{ block.track }}</span></li> 
      {% endif %} 
     {% endfor %} 
     </ol> 
     </a> 
    </article> 
{% endfor %} 

Answer 1

코드를 보면, 내 생각 엔 당신이 정말로은 현재 <article class="mix">에 사람을 업데이트 할 때 당신이 JQuery와 선택기이 페이지에있는 모든 $(".mix__XXXX")를 업데이트 문제로 실행하고 있다는 점이다. 선택자를 $(this).find(".mix__XXXX");

보너스 팁 : $ (this)를 $this = $(this)과 같이 변수에 대입하면 jquery가 매번 랩핑 기능을 실행하지 않아도됩니다. 폐쇄와

업데이트 : (안된)

(function($theMix) {  
    SC.get('/tracks/'+mixID+'', function(track) { 
     var artwork = track.artwork_url; 
     var artwork = artwork.replace('-large', '-t500x500'); 

     $theMix.find(".mix__user").html(track.user.username).attr("href", track.user.permalink_url); 
     $theMix.find(".mix__artwork").attr("src", artwork); 
     $theMix.find(".mix__waveform").attr("src", track.waveform_url); 
    }); 
})($(this));