Rails 5 Bootstrap模式复制前一个窗口

Posted 2023-05-08

【中文标题】Rails 5 Bootstrap模式复制前一个窗口

【英文标题】：Rails 5 Bootstrap modal duplicating previous window

【发布时间】：2018-10-21 10:11:19

【问题描述】：

我有一个引导模式设置，其中我有一些 JQuery 相应地向每个模式动态添加内容。一切正常。

但是有一个小故障我想不通。因此，如果任何属性，在这种情况下，link 不存在并且我打开模式窗口（我将其称为窗口 1），它是空白的 - 完美。但是，如果我单击并打开一个具有 link 属性的模式窗口（窗口 2），然后返回单击没有链接的前一个窗口（窗口 1），它现在会显示一个链接 - 并且它显示的链接来自窗口 2。

我已经检查了控制台，我知道 link.present? 是 false - 所以我觉得它与 JQuery 需要重置有关，或者在我离开 .hover 之后它没有t 绑定了。

有什么想法吗？

jQuery

$(".media").hover(function()           
        var thisLink = $(this).find(".media-link").html();
        $("#media-modal-link").html(thisLink);
);

HTML (index.html.erb)

<% @media.each_slice(2).with_index do |(p,q), i| %>
    <% if p.link.present? %>
        <p class="media-link"> <%= link_to "Read More", p.link, target: "_blank" %></p>
    <% end %> 

    <% if q.link.present? %>
    <p class="media-link"> <%= link_to "Read More", q.link, target: "_blank" %></p>
<% end %>

_modal.html.erb

<div id="media-modal-link">

</div>

【参考方案1】：

在这里找到答案：https://***.com/a/26864048/5551783

$("#media_modal").on("hidden.bs.modal", function() 
                $("#media-modal-link").html("");
              );

【参考方案2】：

您必须特别让悬停功能知道要调用哪个媒体链接。在这种情况下，您可以使用id 来区分媒体链接，而不是使用class='media-link'，您可以使用id='media-link-1' 和id='media-link-2' 之类的东西。然后使用悬停功能中的条件来相应地显示媒体链接。

【讨论】：

你能解释一下条件部分提供一些代码吗？感谢您的帮助。