每个循环从Soundcloud API返回重复数据

Question

我尝试使用Soundcloud API在同一页面上列出多个曲目。我想遍历每个DIV，以便使用/tracks API参考提取正确的单个数据。然而，它只是将相同的数据拉入每个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中有一些Craft 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

查看您的代码，我的猜测是，当您真正只想更新当前$(".mix__XXXX")中的那些时，您的jquery选择器会更新页面上每<article class="mix">}的问题。 。您可能希望将这些选择器更改为$(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));