bootstrap 切换和 if 语句
bootstrap toggle and if statements
我正在尝试使用 bootstrap 创建 3 个切换,我添加了一些 if 语句,其中一些有效但其余的无效
这是我的完整代码
<html>
<head>
<title>Bootstrap Form Helpers Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<br>
<br>
<input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">
<script>
$(function() {
$("#toggle-email").on("change", function () {
if (this.checked) {
$('#toggle-phone').bootstrapToggle('off');
$('#toggle-both').bootstrapToggle('off');
}
else{
$('#toggle-phone').bootstrapToggle('on');
$('#toggle-both').bootstrapToggle('off');
}
})
$("#toggle-phone").on("change", function () {
if (this.checked) {
$('#toggle-email').bootstrapToggle('off');
$('#toggle-both').bootstrapToggle('off');
}
else{
$('#toggle-email').bootstrapToggle('on');
$('#toggle-both').bootstrapToggle('off');
}
})
$("#toggle-both").on("change", function () {
if (this.checked) {
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle('on');
}
else{
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle('off');
}
})
});
</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</body>
</html>
if 语句清晰易懂我的观点
有什么建议吗?
谢谢
当我尝试 运行 你的代码片段时,我一直想知道为什么我会收到这个奇怪的错误。在深入了解插件的文档后,我遇到了这个问题 #31。基本上,当您调用 .bootstrapToggle()
方法时,会触发 change
事件。但是在您的代码中,您有 change
调用 .bootstrapToggle()
的事件处理程序——所以您基本上是一遍又一遍地递归地触发 change()
事件——这会产生不需要的行为。
使用 one of the commenters' solutions,您可以:
$(document).on('click', '[data-toggle=toggle]', function() {
var input = $(this).find('input')[0];
switch (input.id) {
case 'toggle-email':
$('#toggle-phone').bootstrapToggle(!input.checked ? 'on' : 'off');
$('#toggle-both').bootstrapToggle('off');
break;
case 'toggle-phone':
$('#toggle-email').bootstrapToggle(!input.checked ? 'on' : 'off');
$('#toggle-both').bootstrapToggle('off');
break;
case 'toggle-both':
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle(input.checked ? 'on' : 'off');
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">
基本上,我在围绕 input
元素创建的包装器上附加了一个 click
事件处理程序(因此我使用 event delegation)并使用它进行更改.
我正在尝试使用 bootstrap 创建 3 个切换,我添加了一些 if 语句,其中一些有效但其余的无效
这是我的完整代码
<html>
<head>
<title>Bootstrap Form Helpers Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<br>
<br>
<input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">
<script>
$(function() {
$("#toggle-email").on("change", function () {
if (this.checked) {
$('#toggle-phone').bootstrapToggle('off');
$('#toggle-both').bootstrapToggle('off');
}
else{
$('#toggle-phone').bootstrapToggle('on');
$('#toggle-both').bootstrapToggle('off');
}
})
$("#toggle-phone").on("change", function () {
if (this.checked) {
$('#toggle-email').bootstrapToggle('off');
$('#toggle-both').bootstrapToggle('off');
}
else{
$('#toggle-email').bootstrapToggle('on');
$('#toggle-both').bootstrapToggle('off');
}
})
$("#toggle-both").on("change", function () {
if (this.checked) {
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle('on');
}
else{
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle('off');
}
})
});
</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</body>
</html>
if 语句清晰易懂我的观点
有什么建议吗?
谢谢
当我尝试 运行 你的代码片段时,我一直想知道为什么我会收到这个奇怪的错误。在深入了解插件的文档后,我遇到了这个问题 #31。基本上,当您调用 .bootstrapToggle()
方法时,会触发 change
事件。但是在您的代码中,您有 change
调用 .bootstrapToggle()
的事件处理程序——所以您基本上是一遍又一遍地递归地触发 change()
事件——这会产生不需要的行为。
使用 one of the commenters' solutions,您可以:
$(document).on('click', '[data-toggle=toggle]', function() {
var input = $(this).find('input')[0];
switch (input.id) {
case 'toggle-email':
$('#toggle-phone').bootstrapToggle(!input.checked ? 'on' : 'off');
$('#toggle-both').bootstrapToggle('off');
break;
case 'toggle-phone':
$('#toggle-email').bootstrapToggle(!input.checked ? 'on' : 'off');
$('#toggle-both').bootstrapToggle('off');
break;
case 'toggle-both':
$('#toggle-email').bootstrapToggle('on');
$('#toggle-phone').bootstrapToggle(input.checked ? 'on' : 'off');
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
<input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">
基本上,我在围绕 input
元素创建的包装器上附加了一个 click
事件处理程序(因此我使用 event delegation)并使用它进行更改.