jQuery Rails樣式表切換器不起作用

Question

我有三個樣式表（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>

..加載以下樣式表之一：

資產/樣式表/ winter_sunrise.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)

資產/樣式表/ tranquil_mountain.css.sass

@import "basic_styles"

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

將選定的“主題”存儲在會話中也很好，但是一次只存儲一個步驟。 我只是需要它來擺在首位加載。 我究竟做錯了什么？ 單擊鏈接時查看控制台事件，我看到以下內容：

GET http：// localhost：3000 / assets / tranquil_mountain.self.css [HTTP / 1.1 304未修改6ms]

同樣，FWIW，當單擊下拉鏈接（上方）時，下拉菜單不會縮回。 我不知道這兩個問題是否相關。

順便說一句 ，上面的選擇列表匯總如下：

<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>

我已經在這個小功能上工作了很長時間，但無法正常工作。 嘗試從我在此站點和其他站點上找到的教程進行許多變體。 如果這還不夠，或者我要解決所有問題，請告訴我。 我竭盡所能完成工作。

感謝您的幫助！

Answer 1

您確定點擊回調功能正常嗎？ 因為我認為您的選擇器是錯誤的：

 $("#themeControl li a").click

它應該是：

 $(".themeControl li a").click

因為themeControl是一個類，而不是一個id。

jQuery Rails樣式表切換器不起作用

問題描述

1 個解決方案

解決方案1
1 2015-04-24 02:26:54

jQuery Rails樣式表切換器不起作用

問題描述

1 個解決方案

解決方案1 1 2015-04-24 02:26:54

解決方案1
1 2015-04-24 02:26:54