如何創建一個jQuery flipswitch改變上點擊

我有一個jquery flipswitch這樣

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="css/day.css" /> 
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"> 
    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/jquery.mobile-1.4.5.min.js"></script> 
    <script src="js/js.js"></script> 
    <title>Settings Page</title> 

    <body> 
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a"> 
    <option value="off" >Off</option> 
    <option value="on">On</option> 
</select>

我想創建一個功能，允許用戶切換到名爲night.css的替代樣式表。我知道onClick函數在這裏不起作用。我如何去創建一個函數，當我滑動/點擊flipswitch時，允許用戶切換到替代CSS？

來源

2015-06-22 ashley

是否有任何答案可以解決您的問題？如果是這樣，請選擇正確的答案。 – Dropout

這裏您需要使用.onchange()。您可以使用這樣的事情：

jQuery的

$(function() { 
    $("#flip-1").change(function() { 
    if ($(this).val() == "on") 
     $("#mystyle").attr("href", "night.css"); 
    else 
     $("#mystyle").attr("href", "day.css"); 
    }); 
});

的JavaScript

document.getElementById("flip-1").onclick = function() { 
    var myStyle = document.getElementById("mystyle"); 
    if (this.value == "on") 
    myStyle.setAttribute("href", "night.css"); 
    else 
    myStyle.setAttribute("href", "day.css"); 
};

HTML

<link rel="stylesheet" id="mystyle" href="night.css" /> 
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a"> 
    <option value="off" >Off</option> 
    <option value="on">On</option> 
</select>

來源

2015-06-22 10:24:01

把一個id你的CSS鏈接更容易獲得

<link href="day.css" id="switcher" rel="stylesheet" type="text/css"></link>

充分利用平變化功能

$('#flip-1').on('change', function() { 
    if($(this).val() == 'on') { 
     $("#switcher").attr('href', 'night.css'); 
    } 
    else { 
     $("#switcher").attr('href', 'day.css'); 
    } 
});

來源

2015-06-22 10:24:34 Skatch

您可以實現一個簡單的onChange事件，其覆蓋link元素你的DOM。

例如：

$('#flip-1').change(function(){ 
    var linkElement = $('head').find('link[rel=stylesheet]'); 
    if(linkElement.attr('href') == 'style1.css') { 
     linkElement.attr('href', 'style2.css'); 
    } else { 
     linkElement.attr('href', 'style1.css'); 
    } 
});

的'link[rel=stylesheet]'選擇的意思是「發現頭鏈接元素，它們具有相對等於樣式表」 ..

注：這是假設你只有一個CSS綁定鏈接元素存在於您的head中，否則將ID分配給link元素並使用該元素。

來源

2015-06-22 10:26:18 Dropout

如何創建一個jQuery flipswitch改變上點擊

回答

相關問題