如何根据 ajax 请求的结果替换图像？答案

【问题标题】：How can I replace an image based on result of ajax request?如何根据 ajax 请求的结果替换图像？
【发布时间】：2023-02-26 17:04:46
【问题描述】：

我正在制作宾果游戏。我在每个单元格中生成带有图像的卡片。单击单元格时，我想根据对 ajax 调用的响应更改单元格图像。我尝试了以下代码的多种变体，但均未成功：

$(document).ready(function () {
    
    $('img').click(function (event) {
        var src = $(this).attr("src");
        var id = $(this).attr("id");
        var ref = src +' ' + id;
        if(src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: function (response) {
                alert(response);
                if(response.indexOf('Strike') != -1) $(this).attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $(this).attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});

我知道响应包含“罢工”，但没有设置任何图像。请帮忙

我尝试了很多变体，包括基于 response.indexOf('Strike') != -1) 设置 var，然后在 ajax 调用之外交换图像

【问题讨论】：

标签： ajax

【解决方案1】：

在您的 success 回调中，上下文（即 this 的值）已更改，并且不再引用您要更新的图像元素。

要解决此问题，有两种选择：

缓存图像参考

在外部作用域中，缓存图像引用并在回调中重用它：

$(document).ready(function () {
    $('img').click(function (event) {
        var $img = $(this);
        var src = $img.attr("src");
        var id = $img.attr("id");
        var ref = src +' ' + id;
        if (src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: function (response) {
                alert(response);
                if(response.indexOf('Strike') != -1) $img.attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $img.attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});

使用带词法作用域的箭头函数

如果您的环境允许您使用箭头函数（具有 lexical scoping，防止更改 this 的值），您可以使用箭头函数来定义回调：

$(document).ready(function () {
    $('img').click(function (event) {
        var src = $(this).attr("src");
        var id = $(this).attr("id");
        var ref = src +' ' + id;
        if (src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: (response) => {
                alert(response);
                if(response.indexOf('Strike') != -1) $(this).attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $(this).attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});

【讨论】：