Question

我有几个按钮，每个按钮都会改变一个背景。但问题是它没有在每个页面上描绘，我必须重置一直在点击这些按钮的背景。 Application.html.erb

<button type="button" onclick="changeBackground('paper')" color="black">Black</button>
<button type="button" onclick="changeBackground"('gray')">Gray</button>

<script>

function myFunction(color) {
        if (color == "paper"){
         $('body').css('background-image', 'some image')
        }
        if (color == "gray"){
         $('body').css('background-image', 'some image')
     }
   }
</script>

这些背景仅适用于一页。如何为每个页面设置一次背景？谢谢！

Answer 1

如果你要做的是让用户在页面上设置不同的视觉主题，你可以使用cookie和类属性。

module ThemingHelper
  def theme_class
    classes = []
    # lets check if the cookie is acceptable first:
    if ["theme-1", "theme-2"].include?(cookies[:theme])
      classes << cookies[:theme]
    end
    classes.join(" ").html_safe
  end
end

layouts.html.erb：

# ...
<body class="<%= theme_class %>">
# ...

application.css：

body.theme-1 {
  background-color: 'red';
}

body.theme-2 {
  background-color: 'blue';
}

现在让我们设置javascript来处理不断变化的主题：

<button class="change-theme" data-theme="theme-1">Classic</button>
<button class="change-theme" data-theme="theme-2">Funky fresh</button>

请注意，我们不使用内联处理程序。使用jQuery可以轻松避免这种不好的做法。

$(document).on('click', '.change-theme', function(){
  var theme = $(this).data('theme');
  document.cookie = "theme=" + theme;
  $(body).removeClass("theme-1 theme-2").addClass(theme);
  return false;
});

这可能看起来很复杂，但实际上是正确的方法：

HTML只是内容
样式表处理演示文稿
Javascript增强了行为

请参阅：

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

如何通过单击按钮为每个页面设置相同的背景图像？

1 个答案: