gcogco10 Ответов: 1

Как сделать кнопку включения/выключения работы в Bootstrap?

Я не могу понять, почему мои кнопки не работают. При использовании bootstrap switch ниже приведен код, который у меня есть o возможно, я использую 2 библиотеки на своем javascript.

Что я уже пробовал:

<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript"><div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-info locked_active">OFF</button>
 <button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
 </div>

<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">

   $('#toggle_event_editing button').click(function(){
	if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')){
		/* code to do when unlocking */
        $('#switch_status').html('Switched on.');
	}else{
		/* code to do when locking */
        $('#switch_status').html('Switched off.');
	}
	
	/* reverse locking status */
	$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
	$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>

Afzaal Ahmad Zeeshan

С какой проблемой вы столкнулись?

Проверьте консоль браузера, чтобы найти какие-либо проблемы или ошибки.

gcogco10

По-видимому, ошибок нет, поэтому я не следую и действительно использую элемент inspect.

gcogco10

Испытывает ли какой-либо партнер такую же реакцию при использовании этого кода, который я предоставил?

1 Ответов

Рейтинг:
0

gcogco10

Я, видимо, вопрос был о загрузке документа, я не объявлял его сверху.

$(документ).готово(функция(){
// моя логика здесь.


});
NB: Jfiddle поставляется вместе с загрузочным документом, в отличие от того, когда разработчик использует обычный бенчмарк, браузер прочитает это и сообщит вам на вашей консоли. Хорошо тестировать разные инструменты, используя один и тот же сценарий, спасибо, приятель.

Richard Deeming

NB: Вы должны прочитать комментарии в документации jQuery:
.ready() | документация по API jQuery[^]

jQuery предлагает несколько способов прикрепить функцию, которая будет работать, когда DOM будет готов. Все следующие синтаксисы эквивалентны:
* $( handler )
* $( document ).ready( handler )
...
Начиная с jQuery 3.0, рекомендуется использовать только первый синтаксис; другие синтаксисы все еще работают, но устарели.

Так что вместо этого $(document).ready(function(){ ... });, вы всегда должны использовать $(function(){ ... });