изменение изображений src с jquery

Question

Я использую этот код для смены изображения src, но его не работает. если я написал для переменных текстовых значений примера лис:

track = '212'; 
artist = 'azealea banks'; 

Это меняющегося только последние изображениями SRC, но когда я получаю эти переменные значения из соседнего пролета она не работает вообще.

Мой JQuery код:

$(function() { 
    $(".plimg").attr("src", 

    function (index) { 
     var title = $(this).next('span.titletrack').text(); 
     alert(title); 
     var array = title.split(' - '); 
     var track = array[0]; 
     var artist = array[1]; 

     var output; 

     $.ajax({ 
      url: "http://ws.audioscrobbler.com/2.0/?method=track.search", 
      data: { 
       track: track, 
       artist: artist, 
       api_key: "ca86a16ce762065a423e20381ccfcdf0", 
       format: "json", 
       lang: "en", 
       limit: 1 
      }, 
      async: false, 
      success: function (data) { 
       output = data.results.trackmatches.track.image[0]["#text"]; 
      } 

     }); 
     return output; 
    }); 
}); 

и HTML

<div id="playlist" class="scrollable" style="height: 300px;overflow-y: auto"> 
    <li> 
     <img src="/img/playlist/33a - Sulis Vardo.jpg"> 
<span class="titletrack">33a - Sulis Vardo</span> 
    </li> 
    <li> 
     <img class="plimg" src="/img/playlist/33a - Shota.jpg"> 
     <span onclick="playinToplaylist($(this).html());" class="titletrack">33a - Shota</span> 
    </li> 
</div> 

Answer 1

Я сделал несколько изменений. Во-первых, это только нахождение последнего изображения, потому что только последнее изображение в HTML имеет plimg класс, поэтому я добавил, что:

<div id="playlist" class="scrollable" style="height: 300px;overflow-y: auto"> 
    <li> 
     <img class="plimg"/> 
     <span class="titletrack">33a - Sulis Vardo</span> 
    </li> 
    <li> 
     <img class="plimg"/> 
     <span onclick="playinToplaylist($(this).html());" class="titletrack">33a - Shota</span> 
    </li> 
</div> 

Во-вторых, я изменил JavaScript для перебора изображений и загрузить изображение источников асинхронно. Если вы проверяете ответ на вызов ajax, данные, переданные для второго изображения, не возвращают никаких данных изображения, поэтому он не загружается.

$(function(){ 
    $("img.plimg").each(function() { 
     var img = $(this); 
     var title = img.next("span.titletrack").text(); 
     var titleDetails = title.split(' - '); 
     var track = titleDetails[0]; 
     var artist = titleDetails[1]; 

     $.ajax({ 
      url: "http://ws.audioscrobbler.com/2.0/?method=track.search", 
      data: { 
       track: track, 
       artist: artist, 
       api_key: "ca86a16ce762065a423e20381ccfcdf0", 
       format: "json", 
       lang: "en", 
       limit: 1 
      }, 
      async: true, 
      success: function (data) { 
       var trackData = data.results.trackmatches.track; 
       if(!trackData){ 
        alert("No track data for " + artist + "/" + track); 
        return; 
       } 
       var output = trackData.image[0]["#text"]; 
       img.attr("src", output); 
      } 
     });    
    }); 
}); 

Я установил эти обновления на JSFiddle here.