JQuery CSS轉換器不能正常工作

所以我之前發佈了一個關於這個問題的問題，並且在一個有用的響應之後，我開始嘗試嘗試代碼。我之前沒有使用過JQuery，所以這對我來說是一個進步。JQuery CSS轉換器不能正常工作

我正在做的是使用下面的代碼來改變一個網站的CSS，幾乎像一個模板，但是，當按下按鈕時，沒有任何改變。我已經包含了鏈接到Google的JQuery腳本。代碼本身是非常自我解釋的，當你按下按鈕時，它應該加載一個不同的樣式表。我不確定這是否是一個永恆的變化，但只是測試一下。任何幫助表示讚賞！

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script> 

<script type="text/javascript"> 

$("button#grayscale").click(function() { 
    $("link[rel=stylesheet2]").attr({href : "css2.css"}); }); 

$("button#original").click(function() { 
    $("link[rel=stylesheet]").attr({href : "css.css"}); }); 
});

<button id="original">Original</button><br /> 
       <button id="grayscale">Grayscale</button>

來源

2012-12-09 UKPixie

爲什麼不向類元素添加類？ 'stylesheet2'不是'rel'屬性的有效值。 – undefined

我想你應該關注@未定義的建議和應用類前綴的所有規則。然後，您可以在類適用於一個元素高了起來，如果你改變了課堂上的一切如法炮製，這意味着：

CSS：

body.grayscale div{ 
    color: gray; 
} 

body.normal div{ 
    color: green; 
}

JS：

$("button#original").click(function() { 
    $("body").removeClass("grayscale"); 
    $("body").addClass("normal"); 
}); 

$("button#grayscale").click(function() { 
    $("body").removeClass("normal"); 
    $("body").addClass("grayscale"); 
});

來源

2012-12-09 20:31:51

感謝您的及時響應，我會放棄這一點。對於查看該頁面的任何用戶，這些更改是永久性的嗎？ – UKPixie

@UKPixie不，每當頁面刷新時，更改都會丟失。您可以將數據存儲在Cookie中。 –

如何改變permanant，就像在Wordpress中改變主題一樣困難？ – UKPixie

像這樣的切換樣式表，但它不會是一個永久的變化：

HTML：

<div id="theme-switcher"> 
    <button data-theme="css2.css">Greyscale</button> 
    <button data-theme="css.css">Original</button> 
</div>

的jQuery：

$('#theme-switcher').on('click', 'button', function() { 
    $('link[rel=stylesheet]').attr('href', $(this).data('theme')); 
});

要使其永久，你可以通過一個AJAX請求到服務器端腳本頁面，在數據庫中保存的值發送的值。然後可以從數據庫服務器端拉取該值，並在呈現<link />標記時將其插入HTML中。

更新與jQuery的AJAX例子：

$('#theme-switcher').on('click', 'button', function() { 
    var theme = $(this).data('theme'); 

    // if it was a PHP based project 
    $.post('save-theme.php', { theme: theme }).done(function() { 
     $('link[rel=stylesheet]').attr('href', theme); 
    }); 
});

什麼發生在保存-theme.php是服務器端的東西，所以不是我的專業領域很遺憾，對不起！

來源

2012-12-09 23:41:34 jjenzz

感謝珍娜的迴應，非常感謝。會給它一個旋轉！ – UKPixie

嗨珍娜，我錯過的東西，爲了JQuery的工作？我假設腳本類型是文本/ JavaScript和你參考googleapi？該代碼包含在我的index.php – UKPixie

如果你想使用jQuery，那麼是的，你需要在頁面上包含帶有腳本標籤的jQuery。 – jjenzz

JQuery CSS轉換器不能正常工作

回答

相關問題