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

Question

[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 для кнопки показать еще, после такого как срабатывает условие со скрытием элементов, клик на кнопку перестает отрабатывать, как выйти из второго условия ?

Comments

[Александр Васильев]

Что-то ты нагородил.
У тебя должна быть кнопка.

Напиши функцию с циклом проверки скрытых элементов и необходимым количеством итераций (для открытия).

Повесь обработчик на кнопку, внутрь которого передай функцию «про набор элементов».

И кликай.

[AUser0]

Сначала проверяете, что .hasClass("cut") класс есть,
а потом .removeClass('cut') у этой кнопки класс удаляете.
И ожидаете, что при следующем вызове класс опять у кнопки будет?

[by_steris]

Решил данный вопрос добавлением второй кнопки и показом кнопок поочередно

[by_steris]

by_steris,

// Получаем первые N элементов
        $(".section-compact-list .section-compact-list__item:lt(12)").css({'display': 'flex'});

        // Обрабатываем клик по кнопке "показать еще"
        $(".catalog-btn_more").click(function (event) {
            event.preventDefault();

            // Выбираем все скрытые элементы
            var $hidden = $(".section-compact-list .section-compact-list__item:hidden");

            // Показываем N выбранных элементов из скрытых
            $($hidden).slice(0, 12).css("display", "flex").hide().fadeIn(800);

            // Проверяем что список закончился
            if ($hidden.length <= 4) {

                // Меняем кнопки
                $(this).fadeOut(300);
                $(".catalog-btn_cut").fadeIn(800);
            }
        });

        // Обрабатываем клик по кнопке "скрыть"
        $(".catalog-btn_cut").click(function (event) {
            event.preventDefault();

            // Выбираем первые N элементов, которые будем исклчючать и показывать
            $firstElems = $(".section-compact-list .section-compact-list__item").slice(0, 12);

            // Скрываем все элементы кроме выбранных
            $(".section-compact-list .section-compact-list__item").not($firstElems).hide().fadeOut(800);

            // Меняем кнопки
            $(this).fadeOut(300);
            $(".catalog-btn_more").fadeIn(800);
        });

Answer 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, чтобы ваша логика "Показать еще"/"Свернуть" работала корректно.