如何创建一个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改变上点击

回答

相关问题