代码之家 › 专栏 › 技术社区 › John

更改使用AJAX返回的JSON中图像的路径

.net-core ajax jquery c# javascript

John · 技术社区 · 1 年前

无论何时选择颜色,我都想更改图像 the view 所以我写了一个Ajax来返回该颜色的乘积。这里是代码:

$(document).on('change', '#colorId', function () {
    GetImages(colorIds)
});
function GetImages(productId) 
{
    $.ajax({
        url: '@Url.Action("GetImages","ProductView")',
        type: 'GET',
        data: { id : productId },
        success: function (data) {

            console.log("Hello " + data);

            var images = [
                data.image1,
                data.image2,
                data.image3,
                data.image4
            ];

            var image = document.querySelectorAll('#product-imgs .product-preview .image');

            for (var i = 0; i < images.length; i++) {
                image.src = '/Contents/img/' + images[i].split('/').pop();
            }
        }
    })
}

这里是json返回 JsonResult 。如您所见,它包含4个图像路径。所以我想根据我在Json中收到的图像路径更改下面的视图

<div class="col-md-5 col-md-push-2">
    <div id="product-main-img">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>
<!-- /Product main img -->
<!-- Product thumb imgs -->
<div class="col-md-2  col-md-pull-5">
    <div id="product-imgs">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>

我尝试了很多方法,但仍然不起作用。当我改变的时候

 var image = document.querySelector('.image');

它只改变一个图像。有人知道解决方案吗?如有任何指示,我将不胜感激。谢谢你的阅读。

我更改了下面类似代码的说明,另一个问题是只有主图像更改 image

for (var i = 0; i < imageNodes.length; i++) {
            if (images[i]) {
                imageNodes[i].src = '/Contents/img/' + images[i].split('/').pop();
            }
}

当我打开网络工具时,我注意到html代码中有两个不同的img源。为什么不一起改变?

1 回复 | 直到 1 年前

Susamate 1 年前

这个 querySelector 只返回第一元素,该元素与指定的选择器匹配。修改 全部的 图像,您需要使用 querySelectorAll 它返回与指定选择器匹配的所有元素,然后对它们进行迭代以更改它们 src 属性:

var images = document.querySelectorAll('.image'); // Notice that
// this is a nodeList, so you need to use a loop structure 
// to change all the elements.

也就是说,for循环中的成功函数中存在一个错误。这个 image 变量是 NodeList ,因此需要使用引用每个节点 image[i].src 而不是 image.src .

您可以按以下方式更正该部分:

var imageNodes = document.querySelectorAll('#product-main-img .product-preview .image, #product-imgs .product-preview .image');

for (var i = 0; i < imageNodes.length; i++) {
    if(images[i]) {
        imageNodes[i].src = '/Contents/img/' + images[i].split('/').pop();
    }
}