我想在选择颜色时更改图像,所以我编写了一个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返回。正如你所看到的,它包含 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');
它只改变一张图像。有谁知道解决方案吗?我将不胜感激任何指示。感谢您的阅读。
querySelector
仅返回与指定选择器匹配的first元素。要修改 all 图像,您需要使用 querySelectorAll
它返回与指定选择器匹配的所有元素,然后迭代它们以更改其 src
属性。
也就是说,for 循环中的 success 函数存在错误。
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();
}
}