无法更改ajax成功返回时的image-onChange函数

Unable to change image onChange function on ajax success return

本文关键字：image-onChange 函数 返回 成功 ajax      更新时间：2023-09-26

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

我确保我能够从pictureList获得数据，但图像源并没有成功更改。

 $('#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文章之外测试它时，它能够运行。

this的实例是ajax成功功能范围的更改。

在该行$('.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;
});

相关文章：