Javascript 当用户单击缩略图时，如何更改图像？

我想在用户单击其他图像时更改所选（或默认）图像。我用下面的代码试过了，但没用。。我在这里哪里出错了

下面是简单的jquery代码

 <script>
        $('img.thumbnail').click(function () {
            $('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
        })
  </script>

$（'img.缩略图'）。单击（函数（）{
$（'productImage'）.attr（'src'，$（this.attr（'src'））.replace（'60/60'，'400/200'）；
})

和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>

产品名称}}'>

您没有调用正确的选择器

$（'a.缩略图'）。单击（函数（）{
$（'productImage'）.attr（'src'，$（this）.children（'img'）.attr（'src'）.replace（'60/60'，'400/200'））；
})

您的

img

不包含class

。缩略图

与此相反

$('.thumbnail img').click(function () {
    $('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});

---

并检查您的

标记。

尝试将单击事件附加到

a.thumbnail

元素，然后执行a以获取缩略图图像的

src

属性：

$（'a.缩略图'）。单击（函数（）{
var src=$（this）.find（'img'）.attr（'src'）.replace（'60/60'，'400/200'）；
$（'productImage'）.attr（'src'，src）；
});



$（文档）.ready（函数（）{
$（'.缩略图img'）。单击（函数（）{
$（'productImage'）.attr（'src'，$（this.attr（'src'））.replace（'60/60'，'400/200'）；
});
});你的
，但这不是唯一的问题。不，我在复制和粘贴时输入了错误的代码。其他的是什么？如果你听一个类上的click函数，我想你会想改变被点击的DOM元素的图像。因此，更改一张图片的ID并不完美。您可以为每张图片指定一个ID，但我更希望在.click函数中获得单击的img元素。@iCarnagy但如果我能完成您提到的任务，那么我必须创建尽可能多的函数pictures@cervantes这就是为什么我说这不是你想要的方式。您可以做的是为每张图片提供两个图像路径（例如作为数据属性），并在单击时在它们之间切换