更改图像而不刷新页面或重新加载

Question

我正在使用本指南。

http://jsfiddle.net/nz8qy41y/

问题： 当我单击[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>

缩略图：

<ul class="thumbnail">
    <% @advertisement.pictures.to_enum.with_index(1) do |thumb, index|%>


         <li><a href=<%=thumb.image.url(:medium)%>><%= index %></a></li>


    <% end %> 
</ul>

脚本：

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

现在，当我单击小图像时，它链接到正确的图像，但在其他视图中。 我需要在同一视图中更改图像。

有什么帮助吗？

谢谢。

Answer 1

如果不包含在jquery中，请包含jquery

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

但是用这种方式最好在html中为图像键入完整路径

Answer 2

@Mohamed答案的纯JS变体（未经测试）：

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"));
    });
}

Answer 3

是我的错

我在Application.js中有重复的脚本代码，这些脚本代码混合了所有内容。