个人中心
gpt4 book ai didi

JQuery Rails 样式表切换器不工作

转载 作者：行者123 更新时间：2023-11-28 17:08:17 24 4
gpt4 key购买 nike

我有三个样式表 (Sass)，代表我的用户可以从中选择的“主题”。在我的导航中，有一个设置选项卡，其中包含一个链接列表，用户可以在其中选择一个“主题”。这些链接应该进行更改样式表的 JQuery 调用。

问题是这样的:单击链接时，样式表似乎已加载，但页面上的样式保持不变。

这是代码(Rails 4.1.8):

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_self
//= require_tree .

$(document).ready(function() {
    $("#themeControl li a").click(function() {
        $("link.theme_control").attr("href",$(this).attr('rel'));
        return false;
    });
});

application.html.erb(头标签)

<head>
  <title></title>
  <%= stylesheet_link_tag 'tranquil_mountain', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag 'my_icon.png' %>
</head>

上面的 stylesheet_link_tag 使用 tranquil_mountain.css.sass 作为默认呈现的样式表。我要做的是使用以下代码中的链接..

_navigation.html.erb - 编辑根据 lunr 的建议将“themeControl”更改为 ID。 (还是不行)

<li class="dropdown">
  <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-expanded="false">Settings <span class="caret"></span></a>
    <ul class="dropdown-menu" id="themeControl" role="menu">
      <li><em>Change theme</em></li>
      <li><%= link_to "Winter Sunrise", "assets/winter_sunrise.self.css",:class => "theme_control", :remote => true %></li>
      <li><%= link_to "Tropical Shores", "assets/tropical_shores.self.css",:class => "theme_control", :remote
=> true %></li>
      <li><%= link_to "Tranquil Mountain", "assets/tranquil_mountain.self.css",:class => "theme_control", :remote
=> true %></li>
    </ul>
</li>

..加载以下样式表之一:

assets/stylesheets/winter_sunrise.css.sass

@import "basic_styles"

$bg_color: #7E99D0
$bg_image: "winter_sunrise_bg.jpg"
@include basic_styles($bg_color, $bg_image)

assets/stylesheets/tropical_shores.css.sass

@import "basic_styles"

$bg_color: #FFF
$bg_image: "tropical_shores_bg.jpg"
@include basic_styles($bg_color, $bg_image)

assets/stylesheets/tranquil_mountain.css.sass

@import "basic_styles"

$bg_color: #175413
$bg_image: "tranquil_mountain_bg.jpg"
@include basic_styles($bg_color, $bg_image)

将选定的“主题”存储在 session 中也很好，但一次一个步骤。我只需要它首先加载 。我究竟做错了什么？单击链接时查看控制台事件，我看到了:

GET http://localhost:3000/assets/tranquil_mountain.self.css [HTTP/1.1 304 Not Modified 6ms]

此外，FWIW，当单击下 zipper 接(上方)时，下拉菜单不会缩回。我不知道这两个问题是否相关。

BTW 上面的选择列表编译为以下内容:

<li class="dropdown">
  <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-expanded="false">Settings <span class="caret"></span></a>
  <ul class="dropdown-menu themeControl" role="menu">
    <li><em>Chanage theme</em></li>
    <li><a class="theme_control" data-remote="true" href="assets/winter_sunrise.self.css">Winter Sunrise</a></li>
    <li><a class="theme_control" data-remote="true" href="assets/tropical_shores.self.css">Tropical Shores</a></li>
    <li><a class="theme_control" data-remote="true" href="assets/tranquil_mountain.self.css">Tranquil Mountain</a></li>
  </ul>
</li>

我在这个小功能上工作了很长时间，但无法让它工作。尝试了我在这个网站和其他网站上找到的教程的许多变体。如果这还不够信息，或者如果我做错了，请告诉我。我愿意做任何能完成工作的事情。

谢谢你的帮助!

最佳答案

您确定您的点击回调有效吗？因为我认为你的选择器是错误的:

 $("#themeControl li a").click

应该是:

 $(".themeControl li a").click

因为 themeControl 是一个类，而不是一个 id。

关于JQuery Rails 样式表切换器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29837578/

24 4 0
文章推荐： html - 在 php 中使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com