我正在使用带有jquery的select标记在网页外观的深色和浅色主题之间切换。
这是我的代码，工作正常。
$(function() {
$('.style-change').change(function() {
var style = $(this).val();
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
$.cookie("css", style, {
expires: 365,
path: '/'
});
});
});
});
$(document).ready(function() {
$("#style").val('<?php echo $style; ?>');
});<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<select name="" class="style-change form-control" id="style">
<option value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min">Default Style</option>
<option value="https://bootswatch.com/3/darkly/bootstrap.min">Night Mode</option>
</select>
</body>
</html>
我想使用复选框在主题/样式表之间切换，而不是select标记。
我更新了根据我的要求运作的代码段
$(document).ready(function() {
var theme = '<?php echo $style; ?>';
if (theme == 'https://bootswatch.com/3/darkly/bootstrap.min') {
$("#style").prop('checked', true);
} else {
$("#style").prop('checked', false);
}
$('#style').click(function() {
var style = this.checked ? 'https://bootswatch.com/3/darkly/bootstrap.min' : 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
$.cookie("css", style, {
expires: 365,
path: '/'
});
});
});
});<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="style">
<label>Dark Theme</label>
<input type="checkbox" name="" id="style">
<button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
</div>
</body>
</html>
答案 0 :(得分：2)
您可以尝试在复选框中添加值
<input id="#input" type="checkbox" value="true">
然后做这样的事情
if($("#input").value == "true"){
applyDarkTheme();
}else{
applyLightTheme();
}
答案 1 :(得分：1)
只有一个错误$('#btnSumbit')应为$('#btnSubmit')。
$(document).ready(function() {
$('#style').click(function() {
var style = this.checked ? 'https://bootswatch.com/3/darkly/bootstrap.min' : 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
});
});
var defaulttheme = 'https://bootswatch.com/3/darkly/bootstrap.min';
if(defaulttheme == 'https://bootswatch.com/3/darkly/bootstrap.min'){
$('#style').attr("checked",true); //do when you just want to update checked status
$('#style').click();
//do when you want to set initial theme to dark
}
});<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $style; ?>.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="style">
<label>Dark Theme</label>
<input type="checkbox" name="" id="style">
<button type="submit" id="btnSubmit" class="btn btn-success">Change</button>
</div>
</body>
</html>
答案 2 :(得分：0)
我想使用复选框在主题/样式表之间切换
是的可能：
$(function() {
$('#dark').on('change', function() {
var href = 'https://www.w3schools.com/lib/w3-theme-indigo.css';
if (this.checked) {
href = 'https://www.w3schools.com/lib/w3-theme-black.css';
}
$('<link>', {
'href': href,
'rel': 'stylesheet'
}).appendTo('body');
}).trigger('change');
});<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id='lbl'><input id='dark' type="checkbox"/>Use Dark Theme</label>
<div class="w3-card-4">
<div class="w3-container w3-theme w3-card">
<h1>Indigo</h1>
</div>
<div class="w3-container w3-text-theme">
<h2>w3-text-theme</h2>
</div>
</div>
参考site