1

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

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

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

应用程序/视图/页面/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;
    }

应用程序/资产/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链接忽略 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, "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

4

1 回答 1

0

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

应用程序/资产/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);
        });
    });

应用程序/视图/页面/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>
于 2019-06-18T22:37:46.387 回答