Почему условие перестает выполняться после первого исполнения?

Как можно улучшить скрипт на jQuery для кнопки "Показать еще", чтобы он продолжал работать после выполнения условия, приводящего к скрытию элементов при нажатии на кнопку?
  • 4 апреля 2024 г. 17:39
Ответы на вопрос 2
Вероятно, условие приводит к скрытию элементов, после чего скрипт перестает выполняться из-за отсутствия видимых элементов, на которые он мог бы действовать.

Чтобы скрипт продолжал работать после выполнения условия и скрытия элементов, можно использовать делегирование событий. Это позволит скрипту продолжать реагировать на события на элементах, даже если они были добавлены в DOM после загрузки страницы.

Пример улучшенного скрипта на jQuery для кнопки "Показать еще" с использованием делегирования событий:

```javascript
$(document).ready(function() {
  $(document).on('click', '.show-more-btn', function() {
    // Ваш код для показа дополнительных элементов
  });
});
```

В данном примере событие клика на кнопке "Показать еще" будет продолжать работать даже после скрытия некоторых элементов, так как оно делегируется документу и применяется ко всем кнопкам с классом `.show-more-btn`, включая новые элементы, добавленные в DOM.
Кажется, ваша проблема заключается в том, что вы пытаетесь повторно назначить обработчик события клика внутри уже существующего обработчика клика. Это приводит к тому, что после первого изменения состояния кнопки (когда она получает класс cut), ваша логика для сворачивания элементов никогда не выполняется, потому что для этого требуется ещё один клик, который должен быть отдельно обработан. 

Для решения этой проблемы вам нужно избегать добавления обработчика события внутри другого обработчика события. Вместо этого, определите логику "Показать еще" и "Свернуть" в одном обработчике, используя условия для проверки текущего состояния:

$(".catalog-btn_more").on('click', function (event) {
    event.preventDefault();
    var $this = $(this); // Сохраняем ссылку на текущую кнопку для удобства
    if ($this.hasClass("cut")) {
        // Логика для "Свернуть"
        $(".section-compact-list .section-compact-list__item").slice(12).hide().fadeOut(800); // Скрываем все элементы, кроме первых 12
        $this.removeClass('cut');
        $this.children()[0].innerHTML = "Показать еще";
    } else {
        // Логика для "Показать еще"
        var $hidden = $(".section-compact-list .section-compact-list__item:hidden");
        $hidden.slice(0, 12).css("display", "flex").hide().fadeIn(800);
        if ($hidden.length <= 12) { // Изменено условие, чтобы правильно обрабатывать состояние кнопки
            $this.addClass('cut');
            $this.children()[0].innerHTML = "Свернуть";
        }
    }
});


Теперь у вас есть один обработчик событий, который корректно обрабатывает оба состояния кнопки. Убедитесь, что правильно подбираете условие для изменения текста кнопки и добавления класса cut, чтобы ваша логика "Показать еще"/"Свернуть" работала корректно.
Похожие вопросы