当用户单击其他图像缩略图时,我想更改所选(或默认)图像。我用下面的代码尝试了一下,但是没有用。
这是简单的jQuery代码;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
和html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail"><img src="http://via.placeholder.com/60/60?text=otherimage1"></a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail"><img src="http://via.placeholder.com/60/60?text=otherimage2"></a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail"><img src="http://via.placeholder.com/60/60?text=otherimage3"></a>
</div>
</div>
最佳答案
您的img
不包含类.thumbnail
,它与此相反,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
并检查您的
<img>
标签。关于javascript - 用户单击缩略图时如何更改图像?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48012633/