javascript - 无法在ajax成功返回时更改图像onChange函数

Question

嗨，我是这个 javavascript/ajax 的新手。我正在尝试创建一个下拉列表，通过不同的选项动态更改图像，如Fiddle所示在这里，但更改功能似乎不起作用。

我确保能够从pictureList获取数据，但图像源没有像 fiddle 一样成功更改。

 $('#selectVariant').change(function () {     
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
        var pictureList = {};

        //example of my data list
        //var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
        //'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
        //};

        $.each(data.productVariantImages,function(i, productVariantImages){
            pictureList[data.sku] = this.imagePath;
        });
        console.log(pictureList);

        $('.content img').attr({"src":[pictureList[this.value]]}); 
        }
    });
        return false;
});

但是，当我在ajax post之外测试它时，它能够运行。

Answer 1

this 的实例在 ajax success 函数范围内发生变化。

在这一行中 $('.content img').attr({"src":[pictureList[this.value]]}); this 不是 selectVariant 元素的实例。

通常的做法是声明一个变量 that并在其他范围内使用该变量。尝试下面的代码。

$('#selectVariant').change(function () {     
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    var that = this;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
        var pictureList = {};

        //example of my data list
        //var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
        //'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
        //};

        $.each(data.productVariantImages,function(i, productVariantImages){
            pictureList[data.sku] = this.imagePath;
        });
        console.log(pictureList);

        $('.content img').attr({"src":[pictureList[that.value]]}); 
        }
    });
        return false;
});