самозагрузки тумблер и если заявления

Я пытаюсь создать 3 переключению с помощью загрузчика и я добавил некоторые, если заявления, некоторые из них работали, но остальные не работаютсамозагрузки тумблер и если заявления

это мой полный код

<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>

КРП утверждения ясно и легко понять мою точку

какие-либо предложения?

спасибо

источник

2016-12-02 abdulla-alajmi

Как я пытался запустить фрагмент кода, я все думал, почему я получаю эту странную ошибку. После обработки документации плагина я столкнулся с этой проблемой #31. В принципе, событие change запускается, когда вы вызываете метод .bootstrapToggle(). Но в вашем коде у вас есть 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">

В принципе, я прилагаю обработчик click событий на обертке, которая получает созданный вокруг input элемента (отсюда, почему я использую event delegation) и использовать его для внесения изменений.

источник

2016-12-02 20:06:22 Mikey

Большое вам спасибо, сейчас он работает! мои знания о javascript и jquery очень низки, но я работаю над флягой python и хочу добавить эту функцию, спасибо снова –

самозагрузки тумблер и если заявления

ответ

Смежные вопросы