Question

我正在创建一个读书应用。每本书has_many页。通过单击页面的左右两半，我可以获得从一页到下一页的链接。当您将鼠标悬停在页面边缘时，在页面上浮动的div（充当链接）会更改其不透明度，以指示存在另一页面。这些div是img-prev和img-next

以下是页面右半部分的悬停效果示例：

问题在于，在单击到下一页（或上一页）后，该新页面的后继img-prev或img-next div的不透明性仍然非常短暂变回完全透明之前，其“深色”颜色。我觉得这与turbolinks有关，但是我不确定。

app / views / pages / show.html.erb

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

应用/资产/样式表/pages.scss

    #container-main {
      max-width: 100vw;
      text-align: center;
    }

    #div-image-wrapper {
      position: relative;
      display: inline-block;
    }

    #img-prev {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      left: 0;
    }

    #img-next {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
    }

    #img-page {
      max-height: 80vh;
    }

app / assets / javascripts / pages.js

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }
    });

我仅有的提示是，如果我强迫我的img-prev和img-next链接忽略涡轮链接，问题就消失了，但是每页都完成了整页刷新，这不理想。该代码如下所示：

app / views / pages / show.html.erb（备用）

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, "data-turbolinks": false do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, "data-turbolinks": false do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

不确定是否相关，但是我应该提一下，我已将此行添加到我的 config / initializers / assets.rb ：

Rails.application.config.assets.precompile += %w( pages.css )

此外，此应用程序的完整源代码可在我的Github上找到： https://github.com/tliss/lianhuanhua

Answer 1

我更改了以下两个文件，以在单击链接后重新设置了不透明度，这样就解决了问题，而无需强制刷新整页。它需要在标签中添加ID：

app / assets / javascripts / pages.js

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        $('#img-next-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });

        $('#img-prev-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });
    });

app / views / pages / show.html.erb

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, id: "img-prev-link" do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, id: "img-next-link" do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

Rails样式在页面之间持续存在

1 个答案: