引導切換和if語句

我試圖創建一個使用自舉3個切換和我加了一些if語句，他們中的一些工作，但其餘的都沒有工作引導切換和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> 
 
\t 
 
\t 
 
\t 
 
\t $(function() { 
 
\t \t 
 
\t \t 
 
\t \t $("#toggle-email").on("change", function() { 
 
\t \t \t if (this.checked) { 
 
\t \t \t \t $('#toggle-phone').bootstrapToggle('off'); 
 
\t \t \t \t $('#toggle-both').bootstrapToggle('off'); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $('#toggle-phone').bootstrapToggle('on'); 
 
\t \t \t \t $('#toggle-both').bootstrapToggle('off'); 
 
\t \t \t } 
 
\t \t }) 
 
\t \t 
 
\t \t $("#toggle-phone").on("change", function() { 
 
\t \t \t if (this.checked) { 
 
\t \t \t \t $('#toggle-email').bootstrapToggle('off'); 
 
\t \t \t \t $('#toggle-both').bootstrapToggle('off'); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $('#toggle-email').bootstrapToggle('on'); 
 
\t \t \t \t $('#toggle-both').bootstrapToggle('off'); 
 
\t \t \t } 
 
\t \t }) 
 
\t \t 
 
\t \t $("#toggle-both").on("change", function() { 
 
\t \t \t if (this.checked) { 
 
\t \t \t \t $('#toggle-email').bootstrapToggle('on'); 
 
\t \t \t \t $('#toggle-phone').bootstrapToggle('on'); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $('#toggle-email').bootstrapToggle('on'); 
 
\t \t \t \t $('#toggle-phone').bootstrapToggle('off'); 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t }) 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t }); 
 
\t 
 
\t 
 
</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語句清晰和易於理解我的觀點

有什麼建議？

謝謝

來源

2016-12-02 abdulla-alajmi

當我試圖運行你的代碼片段，我一直在想，爲什麼我得到這個奇怪的錯誤。在深入瞭解插件的文檔之後，我遇到了這個問題#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元素（所以爲什麼我用event delegation）周圍形成紙上出現click事件處理程序並用它來進行更改。

來源

2016-12-02 20:06:22 Mikey

非常感謝，它現在正在工作！我對javascript和jquery的知識非常低，但我正在使用python燒瓶，並希望添加此功能，再次感謝 –

引導切換和if語句

回答

相關問題