Question

我想知道识别我在网页上点击的图像的最佳方法，以便我可以用该图像替换另一个div。

我的html页面看起来像这样 -

<div id="image" >
    <%= link_to image_tag(@product.image1_url,:width=>180, :height=>180), selection_path, remote: true %>
</div>
<div id="image2" >
    <%= link_to image_tag(@product.image2_url,:width=>80, :height=>80), selection_path, remote: true %>
</div>
<div id="image3" >
    <%= link_to image_tag(@product.image3_url,:width=>80, :height=>80), selection_path, remote: true %>
</div>

现在，如果我点击图片2，则div中显示id =“image”的图片将被替换为@product.image2_url。我创建了一个product.js.erb文件，如下所示 -

$('#image').html("<%= escape_javascript image_tag(@product.image1_url,width: '250', height: '250') %>");

以上js适用于一个图像。但是我无法编写正确的jquery代码来识别单击的图像。如何识别单击的元素。我认为这是相当的，但我是jquery / javascript的新手。另请告诉我任何有用的资源，可以帮助我学习js.erb文件中的代码。

任何指针都将受到赞赏。

先谢谢!!

Answer 1

您可以找到最近的this div（当前js对象）：

$('img').click(function() {
  clickedDiv = $(this).closest('div');
  clickedDiv.html( ... ); // do whatsoever you want
});

Answer 2

由于您正在将javascript与rails混合，因此您需要一种方法将客户端代码与服务器代码混合。

一种方法是在selection_path中设置一个参数来识别点击的图像，即：selection_path(image_id: '2'然后在你的js.erb中你可以执行以下操作：$("#image<%=params[:image_id]%>").html(...)

第二种方法是使用ujs回调（https://github.com/rails/jquery-ujs/wiki/ajax）在js中设置你可以在你的js.erb文件中使用的变量

Answer 3

这是我的工作示例，其中我不使用新的部分...我在同一页面上的所有图像，其中主图像在顶部，小图像在下面以缩略图列出。 。假设你的html文件有主图像和水平列表的图像，其中任何img点击使用src选择器替换class主图像

<!-- main image that should be replaced on click of any listing images below-->
 <div class="row">
<%= image_tag @image.image_photos.first.avatar.expiring_url(10),:class=>"img-responsive main_image_show_image",:style=>"margin: 0px auto;"%>
</div> 

<!-- this is the horizontal thumbnail image listing row which is clickable and replaces the above main image -->
 <hr>
<div class="row">
<ul class="list-inline text-center">
<% @image.image_photos.each do |i|%>
<li style="width:100px;">
<a href="javascript:void(0);" class="thumbnail change_and_add_new_show_image">
<%= image_tag i.avatar.expiring_url(10),:class=>"img-responsive ",:style=>"margin: 0px auto;"%>
</a>
</li>
<%end%>
</ul>
</div>

 <script type="text/javascript">
$(document).ready(function(){
$('.change_and_add_new_show_image').click(function(){
var img_src=$(this).find("img").attr("src");
$(".main_image_show_image").attr("src",img_src);
})//method ends
})//document ends
</script>

所以你所做的就是用<{1}}

替换 src主图片

如何识别在轨道上的ruby中使用ajax单击哪个图像

3 个答案: