@by_steris

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

$(".section-compact-list .section-compact-list__item:lt(12)").css({'display': 'flex'});

        $(".catalog-btn_more").on('click', function (event) {
            event.preventDefault();
            var $hidden = $(".section-compact-list .section-compact-list__item:hidden");
            $($hidden).slice(0, 12).css("display", "flex").hide().fadeIn(800);
            if ($hidden.length <= 4) {
                $(this).addClass('cut');
                $(this).children()[0].innerHTML = "Свернуть";
            }


            if ($(".catalog-btn_more").hasClass("cut")) {
                event.preventDefault();
                $(this).click(function () {
                    $firstElem = $(".section-compact-list .section-compact-list__item").slice(0, 12);
                    $(".section-compact-list .section-compact-list__item").not($firstElem).hide().fadeOut(800);

                    $(this).removeClass('cut');
                    $(this).children()[0].innerHTML = "Показать еще";

                });
            } 
        });


Написал небольшой обработчик на jquery для кнопки показать еще, после такого как срабатывает условие со скрытием элементов, клик на кнопку перестает отрабатывать, как выйти из второго условия ?
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
Кажется, ваша проблема заключается в том, что вы пытаетесь повторно назначить обработчик события клика внутри уже существующего обработчика клика. Это приводит к тому, что после первого изменения состояния кнопки (когда она получает класс 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, чтобы ваша логика "Показать еще"/"Свернуть" работала корректно.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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