I want to change image whenever I choose the color the view so I write an Ajax to return the product of that color. Here the code :
$(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();
}
}
})
}
Here the json return JsonResult. As you can see its include 4 images path. So I want to change in the view below by the image path that I received in 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>
I have tried many way but still doesn’t work. When I change
var image = document.querySelector('.image');
Its only change one image. Does anyone know solutions? I will appreciate any instructions. Thanks for your reading.