0

我知道这应该很简单，但无法正常工作。我有一个 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 来说是全新的，非常感谢任何帮助。

4

2 回答 2

1

我对 RoR 并不是非常熟悉，但您似乎只有一个图像而没有 LINK，因此阻止默认是没有意义的。

至于点击更改图像：

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

演示

什么是e？

e指可选参数event。你可以在这里阅读更多关于它的信息。

于 2013-05-17T16:37:38.587 回答
0

这应该有效

$('.tn img').bind("click", function (evt) {
    var src = $(this).attr("src");
    $("#mainpic img").attr("src", src);
});
于 2013-05-17T16:42:56.793 回答