当用户单击其他图像缩略图时,我想更改所选(或默认)图像。我用下面的代码尝试了一下,但是没有用。

这是简单的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/

10-12 13:01
查看更多