用 jquery 改变图像 src答案

【问题标题】：changing Images src with jquery用 jquery 改变图像 src
【发布时间】：2013-08-26 07:53:46
【问题描述】：

我正在使用此代码更改图像 src，但它不起作用。如果我要为变量文本值编写 fox 示例：

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

它只改变了最后一张图片 src，但是当我从邻居 span 中获取这个变量值时，它根本不起作用。

我的 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>

【问题讨论】：

为什么要在函数里面放一个函数？这种方式用处不大。只需将 iets 值设置为变量并将其设置为图像
埃克。同步 ajax 对用户体验非常不利 - 在调用期间锁定浏览器。
你能写出答案吗（修正后的代码）

标签： javascript jquery image attr

【解决方案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。

【讨论】：