Javascript 在click Rails上显示原始照片

嗨，我正在浏览上传的照片并显示缩略图。当有人点击缩略图时，我试图显示原始照片。问题是它只对循环中的第一个缩略图起作用。我是否需要为每个缩略图提供一个单独的id，或者如何让它在每个缩略图上工作？有什么建议吗？：）

我的节目：

    <% @project.assets.each do |asset| %>
      <% if asset.photo.file? %>
        <li class="thumbnail col-md-2">
           <a id="thumb" href="#">
             <%= image_tag asset.photo.url(:thumb)  %>
           </a>
        </li>
      <% end %>
        <div id="popup">
          <%= image_tag asset.photo.url(:original) %>
        </div>
    <% end %>

我的javascript：

<script type="text/javascript">
$(document).ready(
    function() {
        $("#thumb").click(function() {
            $("#popup").toggle();
        });
    });
</script>

$（文件）。准备好了吗(
函数（）{
$（“#拇指”）。单击（函数（）{
$（“#弹出”）.toggle（）；
});
});

谢谢：）

您必须使用除id之外的类“thumb”。因为id是uniq，所以只能首先工作

与“popup”id相同，因为始终显示第一张图像。所以你可以做这样的事情：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <a id="asset-#{asset.id}" class="thumb" href="#">
         <%= image_tag asset.photo.url(:thumb)  %>
       </a>
    </li>
  <% end %>
    <div id="popup-asset-#{asset.id}">
      <%= image_tag asset.photo.url(:original) %>
    </div>
<% end %>

<script type="text/javascript">
$(document).ready(
    function() {
        $(".thumb").click(function() {
            $("#popup-" + this.attr("id")).toggle();
        });
    });
</script>

$（文件）。准备好了吗(
函数（）{
$（“.thumb”）。单击（函数（）{
$（“#popup-”+this.attr（“id”）.toggle（）；
});
});

您必须使用除id之外的类“thumb”。因为id是uniq，所以只能首先工作

与“popup”id相同，因为始终显示第一张图像。所以你可以做这样的事情：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <a id="asset-#{asset.id}" class="thumb" href="#">
         <%= image_tag asset.photo.url(:thumb)  %>
       </a>
    </li>
  <% end %>
    <div id="popup-asset-#{asset.id}">
      <%= image_tag asset.photo.url(:original) %>
    </div>
<% end %>

<script type="text/javascript">
$(document).ready(
    function() {
        $(".thumb").click(function() {
            $("#popup-" + this.attr("id")).toggle();
        });
    });
</script>

$（文件）。准备好了吗(
函数（）{
$（“.thumb”）。单击（函数（）{
$（“#popup-”+this.attr（“id”）.toggle（）；
});
});

试试这个：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <%= link_to asset.photo.url(:original), class: :popup_link, target: :_blank do %>
         <%= image_tag asset.photo.url(:thumb)  %>
       <% end %>
    </li>
  <% end %>
<% end %>

<div id="popup"></div>

<script type="text/javascript">
  $(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });
</script>

$（文档）.ready（函数（）{
$（“.popup_link”）。单击（函数（e）{
e、 预防默认值（）；
$（“#弹出窗口”）.html（$（'

我们在这里所做的是，单击时，我们用图像标记填充弹出div，其src属性是单击链接的href属性值

这种方法的好处是，当javascript被取消激活时，它会优雅地退化（单击链接将在新选项卡中打开完整图像）。由于您没有加载所有完整图像（只是为了隐藏它们），您的页面加载时间也可能会减少。

尝试以下方法：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <%= link_to asset.photo.url(:original), class: :popup_link, target: :_blank do %>
         <%= image_tag asset.photo.url(:thumb)  %>
       <% end %>
    </li>
  <% end %>
<% end %>

<div id="popup"></div>

<script type="text/javascript">
  $(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });
</script>

$（文档）.ready（函数（）{
$（“.popup_link”）。单击（函数（e）{
e、 预防默认值（）；
$（“#弹出窗口”）.html（$（'

我们在这里所做的是，单击时，我们用图像标记填充弹出div，其src属性是单击链接的href属性值

---

这种方法的好处是，当javascript被取消激活时，它会优雅地退化（单击链接将在新选项卡中打开完整图像），您的页面加载时间也可能会减少。

这不起作用，因为我使用的是嵌套属性。因此，我的资源实际上没有id。这将为每张照片提供id=“popup asset-#{asset.id}:：这不起作用，因为我使用的是嵌套属性。因此，我的资源实际上没有id。这将为每张照片提供id=”popup asset-#{asset.id}:：这正是我要找的！谢谢！：）试图给popup div一个最大宽度和高度以及一个z索引：1；但是照片似乎忽略了这一点。知道为什么吗？我如何用视频实现这一点？也要有视频缩略图。（使用jwplayer）我建议你为此打开另一个问题。原因是1）这是一个不同的问题2）如果你能找到答案，人们会更容易在谷歌上找到，因为标题更明确3）因此，这是一条基本规则，您必须在发布问题之前至少尝试解决问题，并且至少提供一些代码，即使是非功能性的。也就是说，我看了jwplayer，这似乎是可行的这正是我要找的！谢谢！：）试图给弹出div一个最大宽度和高度以及一个z索引：1；但照片似乎忽略了这一点。知道为什么吗？我如何通过视频实现这一点？还有视频缩略图。（使用jwplayer）我建议你为此提出另一个问题。原因是1）这是一个不同的问题2）如果你能找到答案，人们会更容易在谷歌上找到，因为更明确的标题3）因此，这是一条基本规则，你必须在发布问题之前至少尝试解决问题，至少提供一些代码，即使没有功能。也就是说，我看过jwplayer，这似乎是可行的