jQuery中的attr函数答案

【问题标题】：attr function in jqueryjQuery中的attr函数
【发布时间】：2013-08-26 07:20:22
【问题描述】：

它是我的代码，用于编辑带有来自 json 请求的输出的图像 src，在返回之前一切正常，但是当我编写代码以返回输出时出现错误，不要更改图像 src。

$(function(){
$( ".plimg" ).attr(
"src",
function( index ){
track = '212';
artist = 'azealea banks';
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=track.search",
        {
          track: track,
          artist: artist,
          api_key: "ca86a16ce762065a423e20381ccfcdf0",
          format: "json",
          lang: "en",
            limit: 1        },
function(data) {
var output = data.results.trackmatches.track.image[0]["#text"]; 
});

    return output;  

}
);

});

【问题讨论】：

第 1 步：清晰地格式化您的代码。
你也应该试试 prop 代替 attr
您正在执行ajax 请求，即async，但请立即尝试使用output 变量。这不起作用，您必须在$.getJSON 的回调中分配src 属性。

标签： javascript jquery json attr

【解决方案1】：

因为$.getJSON是异步的，所以attr回调总是返回undefined作为属性值。

解决方案将首先发送ajax请求并在其回调中设置属性值

$(function() {

    var track = '212';
    var artist = 'azealea banks';
    $.getJSON("http://ws.audioscrobbler.com/2.0/?method=track.search", {
        track : track,
        artist : artist,
        api_key : "ca86a16ce762065a423e20381ccfcdf0",
        format : "json",
        lang : "en",
        limit : 1
    }, function(data) {
        var output = data.results.trackmatches.track.image[0]["#text"];
        $(".plimg").attr("src", output);
    });
});

【讨论】：

【解决方案2】：

另一种方法是使 ajax 调用同步

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

    function (index) {
        track = '212';
        artist = 'azealea banks';

        var output;

        $.ajax({ //instead of getJSON as the function does not allow configurations.
            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, //making the call synchronous
            dataType: 'json', //specifying JSON type
            success: function (data) {
                output = data.results.trackmatches.track.image[0]["#text"];
            }

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

【讨论】：