javascript - 如何在 ruby​​ on Rails 中使用 ajax 识别点击了哪个图像

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>

现在，如果我单击 image2，则 id="image"的 div 中显示的图像应替换为 @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(当前js对象)最接近的div:

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