如何根据Ajax请求结果替换图片？Bingo游戏开发求助

核心问题是Ajax回调函数里的this指向错误：在success回调中，this不再指向被点击的<img>元素，导致你无法通过$(this)操作目标图片。

解决方法（三种可选） #

方法1：提前保存目标元素引用（最兼容） #

在点击事件里先把当前<img>元素的jQuery对象存到变量中，回调里直接用这个变量操作：

$(document).ready(function () {
    
    $('img').click(function (event) {
        var $img = $(this); // 保存当前img的jQuery对象
        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;
   })            
});

方法2：使用ES6箭头函数（简化写法） #

箭头函数会继承外部作用域的this，所以回调里的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;
   })            
});

方法3：设置Ajax的context选项 #

通过jQuery Ajax的context配置，指定回调函数里的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},
            context: this, // 指定回调里的this为当前img元素
            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;
   })            
});

额外提示 #

• 可以在回调里加console.log($img)或者console.log(this)，确认是否能正确获取到目标元素，方便调试。
• 确保图片路径images/cross.png和cards/cardon.gif是正确的，避免因路径错误导致图片不显示。

内容的提问来源于stack exchange，提问作者MGibbons