2012-02-17 76 views
0

我正在使用此腳本隨機加載樣式表。 但我也想在網站上有一個可以運行腳本的按鈕,這樣用戶就可以通過點擊按鈕而不是F5來加載新的樣式。單擊運行jquery腳本

關於如何寫這個的任何建議? 乾杯!

var link = []; 
link[0] = "css/style1.css"; 
link[1] = "css/style2.css"; 
link[2] = "css/style3.css"; 

$(function() { 
var style = link[Math.floor(Math.random() * link.length)]; 
$('<link />',{ 
       rel :'stylesheet', 
       type:'text/css', 
       href: style 
      }).appendTo('head'); 
}); 

回答

0

只要把你的代碼中該按鈕:

HTML:

<input type="button" id="btnID" /> 

JS:

$('#btnID').click(function(){ 
    var style = link[Math.floor(Math.random() * link.length)]; 
    $('<link />',{ 
       rel :'stylesheet', 
       type:'text/css', 
       href: style 
      }).appendTo('head'); 
}); 

假設你已經在你的腳本的頂部定義必要的變量:

var link = []; 
link[0] = "css/style1.css"; 
link[1] = "css/style2.css"; 
link[2] = "css/style3.css"; 
+0

我沒有比我張貼其他任何其他代碼。它現在工作正常,它在加載時選擇隨機樣式。我只需要一個按鈕來改變風格。 – 2012-02-17 11:47:03

+0

@CraigJonathanKristensen:我已經爲按鈕和代碼提供了html。 – Sarfraz 2012-02-17 11:49:16

+0

如果我使用你的代碼(包括js和html),我不會在加載時獲得隨機樣式。 – 2012-02-17 11:56:03

0

試試這個:

var link = []; 
link[0] = "css/style1.css"; 
link[1] = "css/style2.css"; 
link[2] = "css/style3.css"; 

function changeStyle() { 
    var style = link[Math.floor(Math.random() * link.length)]; 
    $('<link />',{ 
     rel :'stylesheet', 
     type:'text/css', 
     href: style 
    }).appendTo('head'); 
} 

$(function() { 
    // set style on load 
    changeStyle(); 

    // set on button click 
    $("#myButton").click(changeStyle); 
}); 
+0

如果我使用這段代碼,腳本不會加載任何樣式。 – 2012-02-17 11:58:18