Почему при добавлении класса, jquery не взаимодействует с блоком?

Есть блоки:
<div class="block1">
    <h1 class="close1">Закрыть блок 1</h1>
</div>
<div class="block2">
    <h1 class="close2">Закрыть блок 2</h1>
</div>
<div class="block3">
    <h1 class="close3">Закрыть блок 3</h1>
</div>


<div class="block hidden">
    <h1 class="close">Закрыть блок 4</h1>
</div>
<div class="block hidden">
    <h1 class="close">Закрыть блок 5</h1>
</div>
<div class="block hidden">
    <h1 class="close">Закрыть блок 6</h1>
</div>
<div class="block hidden">
    <h1 class="close">Закрыть блок 7</h1>
</div>

И скрипт, в результате которого отслеживаются нажатия на классы close1, close2 и close3 и прячутся блоки block1, block2, block3. Так-же показывается один новый блок (если имеется) и у этого "нового" блока изменяется класс close на close1, close2 или close3. Вот сам JQUERY скрипт:
$(function() {
            $('.close1').click(function() {
                $('.block1').addClass('hide');
                if ( $('.block:visible').length < 1 ) {
                  $('.block:first').addClass('block1');
                } else {
                  $('.block:visible').next().addClass('block1');
                }
                $('.block1').removeClass('hidden');
                $('.block1 .close').addClass('close1');
                $('.close1').removeClass('close');
            });
        });
 $(function() {
            $('.close2').click(function() {
                $('.block2').addClass('hide');
                if ( $('.block:visible').length < 1 ) {
                  $('.block:first').addClass('block2');
                } else {
                  $('.block:visible').next().addClass('block2');
                }
                $('.block2').removeClass('hidden');
                $('.block2 .close').addClass('close2');
                $('.close2').removeClass('close');
            });
        });
 $(function() {
            $('.close3').click(function() {
                $('.block3').addClass('hide');
                if ( $('.block:visible').length < 1 ) {
                  $('.block:first').addClass('block3');
                } else {
                  $('.block:visible').next().addClass('block3');
                }
                $('.block3').removeClass('hidden');
                $('.block3 .close').addClass('close3');
                $('.close3').removeClass('close');
            });
        });

Ну и простые стили:
.hide{
  display: none;
}
.hidden{
  display: none;
}
.block1, .block2, .block3{
  background:#cfcfff
}
.close1, .close2, .close3{
  cursor: pointer;
}

Проблема в том, что когда класс close заменяется например на close1, то нажатие на него ничего не даёт.
Вот как этот скрипт работает: codepen.io
  • Вопрос задан
  • 505 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Потому, что на момент вызова $('.close1').click(function() { ... бла бла бла этот новый блок не имеет класса close1.
Можно сделать через делегирование. И можно вообще убрать весь этот ад с копированием кучи кода, отличающегося только одной цифрой.

$(document).on('click', '.block .close', function(){
  $(this).closest('.block').addClass('hidden');
})

https://jsfiddle.net/e7td7tos/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
BBoyJuss
@BBoyJuss
WordPress, интерфейсы и все вытекающие
Сергей Минаков: Не совсем понятно про что ты говоришь, похоже что тебе нужен Аккордион. Но можно и вот так jsfiddle.net/e7td7tos/1/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы