Question

我知道这应该很简单但是不能让这个工作。我有一个Ruby on rails应用程序，其属性详细信息部分显示属性的大型主图像，然后是旁边的一些较小的缩略图。我希望用户能够点击或鼠标悬停缩略图，它将显示在主图像区域中。这就是我所拥有的：

_property_details.html.erb

<div id="mainpic">
  <%= image_tag"http://432.mlsimages.movoto.com/0#{@property.mls.last(2)}/#{@property.mls}_0.jpg" %>
</div>
<div id="right_thumbnails">
  <% (1..@property.photo_count).each do |photo| %>

      <div class="tn">
        <%= image_tag("http://432.mlsimages.movoto.com/0#{@property.mls.last(2)}/#{@property.mls}_#{(photo - 1)}.jpg") %>
      </div>
  <% end %>

</div>

<script type="text/javascript">
    $('.tn').on('click', function(e) {
        var img = $('.tn', {src: this.href});
        $('#mainpic').replaceWith(img);
        e.preventDefault();
    });
</script>

底部的jquery是我复制粘贴在一起的点点滴滴，甚至不知道e是什么，对jquery和javascript是全新的，任何帮助都非常感激。

Answer 1

我对RoR并不是很熟悉，但似乎你只有一张图片而且没有LINK所以没有必要防止默认。

点击时更改图像：

$('.tn img').on('click', function() {
    $("#mainpic img").attr('src', $(this).attr('src'));
});

DEMO

什么是e？

e指的是可选参数event。您可以阅读更多相关信息here。

Answer 2

这应该有效

$('.tn img').bind("click", function (evt) {
    var src = $(this).attr("src");
    $("#mainpic img").attr("src", src);
});

单击其他图像时，将主div图像替换为另一个图像 - jquery

2 个答案:

什么是e？