我有三个样式表(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使用quiet_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/windowt_sumrise.css.sass
@import "basic_styles"
$bg_color: #7E99D0
$bg_image: "winter_sunrise_bg.jpg"
@include basic_styles($bg_color, $bg_image)
资产/样式表/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/nealent_mountain.css.sass
@import "basic_styles"
$bg_color: #175413
$bg_image: "tranquil_mountain_bg.jpg"
@include basic_styles($bg_color, $bg_image)
将选定的"主题"存储在会话中也是很好的，但一步一个脚印。我只需要它首先加载。我做错了什么？点击链接时查看控制台事件，我看到的是：
GEThttp://localhost:3000/assets/tranquil_mountain.self.css[HTTP/1.1304未修改6ms]
此外，FWIW，当单击下拉链接(如上)时，下拉菜单不会收回。我不知道这两个问题是否相关。
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。