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

Question

[Сергей Минаков]

Есть блоки:

<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

Answer 1

[Stalker_RED]

Потому, что на момент вызова $('.close1').click(function() { ... бла бла бла этот новый блок не имеет класса close1.
Можно сделать через делегирование. И можно вообще убрать весь этот ад с копированием кучи кода, отличающегося только одной цифрой.

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

https://jsfiddle.net/e7td7tos/

Comments

[Сергей Минаков]

Прикол в том, что мне нужно не только закрывать, но и открывать (показывать) спрятанные блоки, что-бы на экране их было только 3. А остальные были как-бы спрятанны.

[Stalker_RED]

Сергей Минаков: Любые три или в каком-то порядке?

[Сергей Минаков]

Stalker_RED: В любом. Просто есть "список" блоков, которые нам нужно показать. Скажем:

• Блок 1
  
• Блок 2
  
• Блок 3
  
• Блок 4
  
• Блок 5
  

Но мы показываем только три и при закрытии одного из них показываем новый (если есть).

[Stalker_RED]

Сергей Минаков: Так?

$('.myBlocks').on('click', '.block .close', function(){
  var clicked = $(this).closest('.block') // блок который прячется
  var next = clicked.nextAll('.block:hidden:first') // следующий скрытый
  if (!next.length) { // если следующих скрытых нет
    next = $('.block:hidden:first') // первый скрытый
  }
  clicked.addClass('hidden');
  next.removeClass('hidden'); 
})

https://jsfiddle.net/e7td7tos/2/

[Сергей Минаков]

Stalker_RED: Да, только без первого скрытого. Что-бы первый, больше не появлялся. https://jsfiddle.net/e7td7tos/4/

[Stalker_RED]

Сергей Минаков:

тогда им можно делать remove() вместо addClass('hidden')

Answer 2

[Юнус Газиев]

Сергей Минаков: Не совсем понятно про что ты говоришь, похоже что тебе нужен Аккордион. Но можно и вот так jsfiddle.net/e7td7tos/1/

Comments

[Сергей Минаков]

Нет. Я делаю что-то типа системы уведомлений. Отображается скажем 7 блоков, но влезают только три. И мне нужно что-бы показывались три блока(остальные display: none), если скрыть один, то появиться другой. Блоки, которые были закрыты/скрыты больше не должны показываться.

[Stalker_RED]

Сергей Минаков: тогда им можно делать remove() вместо addClass('hidden')

[Сергей Минаков]

Stalker_RED: Хорошо, только не в это проблема. У новых блоков при изменении close на close1 закрытие не работает.

[Stalker_RED]

Сергей Минаков: На этот вопрос я уже отвечал. Код типа $(selector).click(...) привязывает обработчики не к классу, который может быть когда-нибудь появится а к конкретным блокам. Если позже вы добавили к ним close1 - чуда не будет. Для этого есть делегирование, и я вам уже два рабочих примера собрал.

[Юнус Газиев]

Это очередь jsfiddle.net/e7td7tos/5/

[Юнус Газиев]

Сергей Минаков: Если уж такая проблема с классами то можно блоки выбрать по атрибутами и менять классы сколько угодно :) И почему именно close1?