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

How can I set the same background-image for every page with a button click?

本文关键字：背景 图像 页面设置 单击 何通过 按钮      更新时间：2023-09-26

我有几个按钮，每个按钮都会改变一个背景。但问题是它不是在每个页面上都描绘的，我必须一直单击这些按钮重置背景。应用.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>

这些背景仅在一个页面上工作。如何为每个页面设置一次背景？谢谢！

如果你试图做的是让用户在页面上设置不同的视觉主题，你可以将cookie与class属性一起使用。

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 %>">
# ...

应用.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
相关文章：