Объясните почему не работает?
Решил сделать самодельный 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 |
Потому не нужно думать что jQuery - это магическое заклинание.
Это ведь функция, которая, если передать ей селектор, произведет выборку элементов по этому селектору. Сколько элементов .bold.show-hide-on в момент выполнения скрипта? Правильно - ни одного. К слову вы не в том месте вставили свой скрипт. В вашей версии в момент выполнения скрипта не будет найден даже .bold.show-hide, так как <body> еще не загружен. Нужно опустить скрипт ниже, либо установить callback на событе DOMContentLoaded ( $(document).ready() ) Цитата:
|
Цитата:
А как тогда надо видоизменить скрипт что бы он заработал? |
Я переделал вот так:
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");
}
});
Но может есть более продвинутые варианты? |
| Часовой пояс GMT +3, время: 23:38. |