Javascript 在不刷新或重新加载页面的情况下更改图像

我正在使用这个指南

问题: 当我点击[1][2]或[3]时，主图像没有改变。相反，我被重定向到图像。

视图。 主图像：

<div class="block-2-image"> 

<a href=<%=@advertisement.pictures.first.image.url(:original)%> data-lightbox="gallery"><%=  image_tag @advertisement.pictures.first.image.url(:medium),
    :title=> @advertisement.name,:id=>"main-image", :alt =>                                   @advertisement.name%></a>

</div>

现在，当我点击小图片时，它会链接到右边的图片，但在其他视图中。 我需要在同一视图中更改图像。

有什么帮助吗

---

谢谢。

如果未包括jquery，请包括它 在jquery中

$(document).ready(function(){
   $('.thumbnail li img').on('click',function(){
      $('.block-2-image').find('img').attr('src', $(this).attr('src'));
   });
});

---

但是通过这种方式，最好在html中键入图像的完整路径。

纯JS版本@Mohamed的答案（未测试）：

这是我的错误

---

我在Application.js中有重复的脚本代码，把所有内容都弄混了。

当点击这些数字图像时，可能只是更改图像路径？

你可以尝试一下@BogdanKuštan Tnx这样的东西。但我的代码不会改变主映像，它只是重定向到正确的映像路径。脚本有什么问题吗？@EdgarsRozenfelds在

中单击

回调函数，您应该传递

事件

参数（在我的示例中是变量

e

）和内部函数调用

event.preventDefault（）

谢谢。但这样做的目的是避免在选择中出现小缩略图。我有不同的图像，代表图像编号，而不是缩略图。对不起，你能重新措辞吗？我仍然缺少缺少的内容。@eatonphill您的代码将主图像更改为缩略图，但我不需要。我需要能够单击四个小图像中的一个，然后从其他路径更改主图像。你说的“从其他路径更改主图像”是什么意思？我真的不确定。尽管看起来无论你现在的问题是什么，它都超出了原始问题的范围。如果我开始正确理解你，我们的任何一个答案都会给你你所需要的。如果需要首先对src字符串进行操作，那么就这样做。但我很难理解你到底需要什么。

$(document).ready(function(){
   $('.thumbnail li').on('click',function(){
      $('.block-2-image a').find('img').attr('src', $(this).attr('src'));
   });
});

$(document).ready(function(){
   $('.thumbnail li img').on('click',function(){
      $('.block-2-image').find('img').attr('src', $(this).attr('src'));
   });
});

window.onload = function() {
    var selector = document.querySelector(".thumbnail li img");
    selector.addEventListener("click", function() {
        var img = document.querySelector(".block-2-image img");
        img.setAttribute("src", selector.getAttribute("src"));
    });
}