Question

我正在使用此脚本在加载时随机加载样式表。但是我也想在网站上有一个可以运行脚本的按钮，这样用户就可以通过单击按钮而不是F5来加载新样式。

关于如何写这个的任何建议？干杯！

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');
});

Answer 1

只需将代码放在该按钮中：

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

Answer 2

试试这个：

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);
});

单击运行jquery脚本

2 个答案: