更改jQuery的圖像src

我使用此代碼更改圖像src，但它不工作。如果我的變量文本值寫入狐狸例如：更改jQuery的圖像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>

來源

2013-08-26 Giorgi Chumburidze

爲什麼函數裏面的函數？這種方式幾乎沒有用處。只需將iets值設置爲一個變量並將其設置爲Eeeck的圖像 – Martijn

。同步ajax對用戶體驗非常不利 - 在通話期間鎖定瀏覽器。 – jfriend00

並且你可以用'.each（）來寫答案（更正後的代碼） –

我做了一些改動。首先，它的唯一找到的最後一個圖像，因爲只有在你的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。

來源

2013-08-26 08:25:56

好方法' – amorbytes

更改jQuery的圖像src

回答

相關問題