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

【问题标题】：Rails styles persisting between pagesRails 样式在页面之间持续存在
【发布时间】：2019-06-18 03:20:43
【问题描述】：

我正在创建一个读书应用程序。每本书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>

app/assets/stylesheets/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 链接忽略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

【问题讨论】：

只是想一想，当点击按钮和请求通过之前通过JS手动删除深色样式，然后在下一页加载时添加深色样式呢？始终可以选择将此应用程序制作成单页应用程序，但无论如何都值得尝试兑换您的代码，特别是如果这是一个小问题
@maxpleaner 我正在考虑这一点，但也只是想弄清楚为什么样式会在更改之前在新页面上持续一瞬间。有没有一种最好的方法来删除样式？我尝试做 $('img-prev').click 但我认为我没有正确构建它或将它放在正确的位置。
是的，我在想一个“点击处理程序”，有无数关于它的教程

标签： ruby-on-rails ruby ruby-on-rails-5 turbolinks-5

【解决方案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>

【讨论】：