javascript - 如何在灯箱图像上设置外部链接？

Question

我有一个画廊和一个管理画廊页面。

在管理图库上，我的图像上方出现了一个删除按钮，但是当我单击它时，它会打开一个灯箱加载，而不是消息“您确定吗？”。

我认为是灯箱的代码使链接执行此操作。我该如何解决这个问题？

<div class="lightbox-grid square-thumbs" data-gallery-title="Gallery">
    <ul>
       <% @galleries.each do |gallery| %>
       <% gallery.pictures.each do |f| %>
         <div class="contentdeletar">
            <li>
              <div class="deletar">
                <%= link_to 'delete', f, method: :delete, data: { confirm: 'Are you sure?' } %>
               </div>
               <a href="<%= f.image.url(:large) %>" data-lightbox="true" data-title="<%= f.description %>">
               <div class="background-image-holder">
                  <img alt="image" class="background-image" src="<%= f.image.url(:large) %>">
               </div>
               </a>
            </li>
          </div>
      <% end %>
      <% end %>
    </ul>
</div>

线路<%= link_to 'delete', f, method: :delete, data: { confirm: 'Are you sure?' } %>由于某种原因无法正常工作。我认为它尝试打开灯箱内的链接或类似的东西

Answer 1

我发现scripts.js有这个

$('.lightbox-grid li a').each(function(){
        var galleryTitle = $(this).closest('.lightbox-grid').attr('data-gallery-title');
        $(this).attr('data-lightbox', galleryTitle);
    });

因此，所有 a 都会表现得像这样。

所以我创建了一个名为 dav 的 div 并将灯箱链接放入其中

<div class="deletar">
   <%= link_to 'delete', f, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<div class="dav">
   <a href="<%= f.image.url(:large) %>" data-lightbox="true" data-title="<%= f.description %>">
   <div class="background-image-holder">
      <img alt="image" class="background-image" src="<%= f.image.url(:large) %>">
   </div>
</div>

并将 js 文件更新为 $('.lightbox-grid li dav a').each(function(){所以现在它只能在 li dav a 链接内工作