jquery - bootstrap 切换和 if 语句-6ren

jquery - bootstrap 切换和 if 语句

转载作者：行者123 更新时间：2023-12-01 04:39:55

24

4

我正在尝试使用 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 事件。但是在您的代码中，您有调用 .bootstrapToggle() 的 change 事件处理程序 - 因此您基本上是递归地触发 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 )并使用它来制作的变化。

关于jquery - bootstrap 切换和 if 语句，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40938961/

24

4

0

文章推荐： google-chrome - console.log 开头的额外空间

文章推荐： python - 一个简单的命令 - "np.save"，也许我误解了

文章推荐： java - 用户如何将图像导入到应用程序中？

文章推荐： Java串行编程

java - 想要创建 if 语句，然后是几个 else-if 语句，最后是一个 "capture-all"else-语句
创建一个“海盗对话”，可以选择左手或右手。我希望它对“左”和“右”的不同拼写做出积极的回答(正如您将在代码中看到的那样)，但是，当我为所有非“右”或“左”的输入添加最终的“else”代码时，它给了我一
VBS教程：VBScript 语句-With 语句
With 语句对一个对象执行一系列的语句。 With object statements End With 参数 object 必需的部分
VBS教程：语句-While...Wend 语句
While...Wend 语句当指定的条件为 True 时，执行一系列的语句。 While condition &nbsp； Version [stat
python - 在同一行上创建 for 语句，但不在下一个输入上创建 for 语句
所以我正在处理的代码有一个小问题。 while True: r = input("Line: ") n = r.split() if r == " ":
javascript - 嵌套 if 语句 - 如何重构条件以在迭代时使用一个 if 语句
我有一个对象数组: var contacts = [ { "firstName": "Akira", "lastName": "Laine", "number"
c - 在函数中有两个return 语句，将执行哪个return 语句？
int main() { int f=fun(); ... } int fun() { return 1; return 2; } 在上面的程序中，当从main函数中调用一个
ios - Switch 语句 VS If 语句
我的项目中有很多 if 语句、嵌套 if 语句和 if-else 语句，我正在考虑将它们更改为 switch 语句。其中一些将具有嵌套的 switch 语句。我知道就编译而言，switch 语句通常更
VBS教程：VBScript 语句-Rem 语句
Rem 语句包含程序中的解释性注释。 Rem comment 或 ' comment comment 参数是需要包含的注释文本。在 Rem 关键字和 comment 之间应有一个空格。
VBS教程：VBScript 语句-ReDim 语句
ReDim 语句在过程级中声明动态数组变量并分配或重新分配存储空间。 ReDim [Preserve] varname(subscripts) [, varname(subscripts)]
VBS教程：VBScript 语句-Randomize 语句
Randomize 语句初始化随机数生成器。 Randomize [number] number 参数可以是任何有效的数值表达式。说明 Randomize 使用 number 参数初始
VBS教程：VBScript 语句-Public 语句
Public 语句定义公有变量并分配存储空间。在 Class 块中定义私有变量。 Public varname[([subscripts])][, varname[([subscripts])
VBS教程：VBScript 语句-Sub 语句
Sub 语句声明 Sub 过程的名称、参数以及构成其主体的代码。 [Public [Default]| Private] Sub name [( arglist )]
VBS教程：VBScript 语句-Set 语句
Set 语句将对象引用赋给一个variable或property，或者将对象引用与事件关联。 Set objectvar = {objectexpression | New classname
javascript - 我在一个 for 循环中有两个 if 语句，为什么有时会在第一个语句之前运行第二个 if 语句？
我有这个代码块，有时第一个 if 语句先运行，有时第二个 if 语句先运行。我不确定为什么会这样，因为我认为 javascript 是同步的。 for (let i = 0; i < dataObje
javascript - 为什么这段代码不起作用？ Javascript if 语句，else if 语句
这是一个 javascript 代码，我想把它写成这样:如果此人回答是，则回复“那很酷”，如果此人回答否，则回复“我会让你开心”，如果此人回答的问题包含"is"或“否”，请说“仅键入”是或否，没有任何
java - 短 if 语句 "inside"短 if 语句
这是我的任务，我尝试仅使用简短的 if 语句来完成此任务，我得到的唯一错误是使用“(0.5<=ratio<2 )”，除此之外，构造正确吗？ Scanner scn = new Scanner(
postgresql - SELECT 语句中的 SQL 语句 If 语句
有没有办法在 select 语句中使用 if 语句？我不能在这个中使用 Case 语句。实际上我正在使用 iReport 并且我有一个参数。我想要做的是，如果用户没有输入某个参数，它将选择所有实例。
java - switch 语句 vs if 语句，哪个对性能更好？
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: If vs. Switch Speed 我将以 C++ 为例，但我要问的问题不是针对特定语言的。我的意思是一
VBS教程：VBScript 语句-Property Set 语句
Property Set 语句在 Class 块中，声明名称、参数和代码，这些构成了将引用设置到对象的 Property 过程的主体。 [Public | Private] Pro
VBS教程：VBScript 语句-Property Let 语句
Property Let 语句在 Class 块中，声明名称、参数和代码等，它们构成了赋值（设置）的 Property 过程的主体。 [Public | Private] Prop

首页

博学

6Ren·AI

商城

jquery - bootstrap 切换和 if 语句