javascript - 如何根据我单击的 block 中的哪个项目来渲染部分的不同版本？

Question

我有一个包含许多记录的模型Painting。我将它们全部打印出来，并且对于每一个我都想附加一些 jQuery，以便单击每幅绘画都会呈现带有大版本绘画的部分内容。

<div id="viewer"></div>
<% Painting.all.each_with_index do |painting, index| %>
    <%= image_tag(painting.path, id:"painting"+index%>
    <% @painting = painting %>
    <script type="text/javascript">
        $("#painting<%=index%>").click(function() {
          $("#viewer").html("<%= escape_javascript(render 'partial') %>");
        });
    </script>
<%end%>

_partial.html.erb

<%= image_tag(@painting.path, class:"large-painting") %>
<!-- more code -->

问题是，值@painting在每次循环时都会重置，到最后它等于最后一个Painting。因此，无论我点击哪一幅绘画，最后一幅始终是局部渲染的那幅。

谁能想出一种方法，让部分渲染的绘画与我点击的绘画相对应，而无需为每个绘画单独编写 jQuery？

Answer 1

您能否将每个图像的大版本的 URL 添加为图像上的自定义属性，然后使用与用户单击的任何图像相对应的 URL 更新查看器引用的 URL？

类似于:

$("#painting<%=index%>").click( function(){
    $(Viewer_Image_Element).prop('src', $(this).prop('custom_URL_property')) 
  });

或者，您可以创建一个新的 Controller 操作(或对现有 Controller 操作的新响应)，通过渲染部分图像进行响应。您可以使用 $.ajax每当有人单击图像时调用 Controller 操作，并将图像 ID 作为参数与请求一起发送。服务器将使用该参数来正确渲染部分内容，然后将其在响应中发回。然后只需将 html 插入查看器即可。如果这是您想要采取的路线，我可以添加一些示例代码。

这也意味着用户在首次加载页面时不需要下载每个图像的大版本。这可能是好事，也可能不是好事。