Форум

Matvey007 · #1 (**permalink**) 03.06.2013, 02:37

Решил сделать самодельный toggle-переключатель. Смысл его прост:
при клике на div скрывается следующий, при повторном клике следующий появляется.
Соответственно составил две части кода для первого и второго действия. Но первое действие выполняется, а второе нет.
Интересует причина такого поведения jQuery!

Код:

<head>
	<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
	<style type="text/css">
		.bold.show-hide {height: 30px; background: #008000;}
		.bold.show-hide-on {background: #00F;}
		.big {height: 30px; background: #F00;}
	</style>
	<script type="text/javascript">
	      $( document ).ready(function() {
                 //part1
                 jQuery(".bold.show-hide").click(function() {
                   jQuery(this).addClass("show-hide-on");
                   jQuery(this).next().css("display", "none");
                 });
                 //part2
                 jQuery(".bold.show-hide-on").click(function() {
                   jQuery(this).removeClass("show-hide-on");
                   jQuery(this).next().css("display", "block");
                 });
          }); 
	</script>
</head>
<body>
	<div class="bold show-hide"></div>
	<div class="big"></div>
</body>

Для наглядности: http://codepen.io/seraphzz/pen/AFxHc

danik.js · #2 (**permalink**) 03.06.2013, 04:17

Потому не нужно думать что jQuery - это магическое заклинание.
Это ведь функция, которая, если передать ей селектор, произведет выборку элементов по этому селектору.

Сколько элементов .bold.show-hide-on в момент выполнения скрипта?
Правильно - ни одного.

К слову вы не в том месте вставили свой скрипт. В вашей версии в момент выполнения скрипта не будет найден даже .bold.show-hide, так как <body> еще не загружен. Нужно опустить скрипт ниже, либо установить callback на событе DOMContentLoaded ( $(document).ready() )

Сообщение от Matvey007

Очень интересует причина такого поведения jQuery!

Вот народ жеш. Не знает основ языка, зато пытается анализировать поведение каких-то библиотек.

Matvey007 · #3 (**permalink**) 03.06.2013, 05:33

Сообщение от danik.js

Нужно опустить скрипт ниже, либо установить callback на событе DOMContentLoaded ( $(document).ready() )

Спасибо за подсказку, document.ready я действительно потерял. Уже добавил.
А как тогда надо видоизменить скрипт что бы он заработал?

Matvey007 · #4 (**permalink**) 03.06.2013, 05:41

Я переделал вот так:

jQuery("#sidebar .bold.show-hide").click(function() {
		if(jQuery(this).hasClass('show-hide-on')){
		   jQuery(this).removeClass("show-hide-on");
		   jQuery(this).next().css("display", "block");
		} else {
		   jQuery(this).addClass("show-hide-on");
		   jQuery(this).next().css("display", "none");
		}
});

Но может есть более продвинутые варианты?

Форум

Справочник

Discord чат

Курсы javascript