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

Question

我正在使用这个指南。

问题： 当我点击 [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 中有重复的脚本代码，混淆了所有内容。

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

Change image without page refresh or reload

javascript

jquery

html

ruby-on-rails

image