Скрыть кнопку «Загрузить еще» на вкладках фильтров, кроме «Все» (jQuery)

У меня есть фильтруемые вкладки и фотографии по категориям. Первая категория — Все, и еще 4 категории. У меня есть две функции:

  1. Для фильтрации:

         $(function() {
         $(".filter_portfolio li").on('click', function() {
         let category = $(this).attr("data-filter");
         $(".filter_portfolio li").removeClass("active");
         $(this).addClass("active");
         let item = $(".portfolio .portfolio_item");
         item.fadeOut("slow");
         item.each(function() {
         if ($(this).hasClass(category)) {
         $(this).fadeIn(1000);
         }
         });
         });
         });
    
  2. Кнопка «Загрузить еще» загружает еще 12 фотографий

         $(function (){
         const elements = $(".portfolio_item.invisible");
         $(".portfolio_item ").slice(0, 12).show();
         if ($(elements).length !== 0) {
             $(".load_btn").show();
         }
         $(".load_btn").on('click', function() {
         $('.portfolio_item.invisible:hidden').slice(0, 12).slideDown( "slow" );
         if ($(".portfolio_item.invisible:hidden").length === 0) {
         $(".load_btn").fadeOut("slow");}
         });
         });
    

Проблема в том, что я не могу показать этот .load_btn во всех категориях, но не могу показать во всех других категориях.

Я попытался добавить этот код в первую функцию

if (!$(".filter_cat", ".active").hasClass('loadbtn')) {
    $(".load_btn").hide();
} else {
    $(".load_btn").show();
}

**Первая функция с оператором if else **

        $(function() {
        $(".filter_portfolio li").on('click', function() {
        let category = $(this).attr("data-filter");
        $(".filter_portfolio li").removeClass("active");
        $(this).addClass("active");
        let item = $(".portfolio .portfolio_item");
        item.fadeOut("slow");
        item.each(function() {
        if ($(this).hasClass(category)) {
        $(this).fadeIn(1000);
        }
        if (!$(".filter_cat", ".active").hasClass('loadbtn')) {
        $(".load_btn").hide();
        } else {
        $(".load_btn").show();
        }
        });
        });
        });

Но когда я нажимаю на другие вкладки, а затем возвращаюсь на вкладку Все, кнопки загрузить больше нет.

Это HTML:

//Filter
$(function() {
    $(".filter_portfolio li").on('click', function() {
        let category = $(this).attr("data-filter");
        $(".filter_portfolio li").removeClass("active");
        $(this).addClass("active");
        if ($(this).hasClass('loadbtn')) {
            $(".load_btn").show();
        } else {
            $(".load_btn").hide();
        }
        let item = $(".portfolio .portfolio_item");
       item.fadeOut("slow");
        item.each(function() {
            if ($(this).hasClass(category)) {
                $(this).fadeIn(1000);
            }

        });
    });

});
//Load more 12 + 12
$(function (){
        const elements = $(".portfolio_item.invisible");
        $(".portfolio_item").slice(0, 12).show();
        if ($(elements).length !== 0) {
            $(".load_btn").show();
        }
        $(".load_btn").on('click', function() {
        $('.portfolio_item.invisible:hidden').slice(0, 12).slideDown( "slow" );
        if ($(".portfolio_item.invisible:hidden").length === 0) {
        $(".load_btn").fadeOut("slow");}
       
    });
    });
.portfolio_item {
display: block;
}

.portfolio_item.invisible {
    display: none;
}


.filter_portfolio {
    display: flex;
    margin: 93px auto 69px;
    justify-content: center;
    width: 65%;
    align-items: center;
list-style: none;
}

.filter_cat {
    padding: 13px 15px;
    color: #717171;
    font-size: 14px;
    line-height: 42px;
    flex-basis: 20%;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
}

.filter_cat:nth-child(odd) {
    border-right: 1px solid #DADADA;
    border-left: 1px solid #DADADA;
}

.filter_cat.active {
    border: 2px solid #18CFAB;
    color: #18CFAB;
}

.portfolio {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.load {
    text-align: center;
    margin-top: 70px;
}

.load_btn {
    padding: 22px 17px;
    border-radius: 3px;
    color: #FFFFFF;
    width: 170px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    background-color: #18CFAB;
    border: none;
    cursor: pointer;
    justify-content: space-around;
    display: flex;
    margin: auto;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "filter_portfolio">
                    <li class = "filter_cat active loadbtn" data-filter = "all">All</li>
                    <li class = "filter_cat" data-filter = "tab1">Tab1</li>
                    <li class = "filter_cat" data-filter = "tab2">Tab2</li>
                    <li class = "filter_cat" data-filter = "tab3">Tab3</li>
                    <li class = "filter_cat" data-filter = "tab4">Tab4</li>
                </ul>
                <div class = "portfolio">
                <div class = "portfolio_item all tab1">
                Tab1
                </div>
                <div class = "portfolio_item all tab2">
                Tab2
                </div>
                <div class = "portfolio_item all tab3">
                Tab3
                </div>
                <div class = "portfolio_item all tab4">
                Tab4
                </div>
                <div class = "portfolio_item invisible all tab1">Tab1.1</div>
                 <div class = "portfolio_item invisible all tab2">Tab2.1</div>
                  <div class = "portfolio_item invisible all tab3">Tab3.1</div>
                   <div class = "portfolio_item invisible all tab4">Tab4.1</div></div>
                   <div class = "load"><button class = "load_btn"><i class = "fas fa-plus"></i> Load more</button></div>

«Я пытался добавить этот код в первую функцию» — пожалуйста, покажите подобные вещи в контексте, иначе мы не сможем сказать, где вы на самом деле добавили этот код.

CBroe 10.12.2020 15:11

Вы только что добавили класс active с помощью $(this).addClass("active"), поэтому теперь не нужно искать, какой элемент имеет этот класс — это $(this). Так что теперь вы можете просто проверить $(this).hasClass('loadbtn').

CBroe 10.12.2020 15:12

Когда я добавляю if ($(this).hasClass('loadbtn')) { $(".load_btn").show(); } еще { $(".load_btn").hide(); } Затем, когда я возвращаюсь ко всем, он появляется там, но все скрытые фотографии, которые должны появиться при нажатии на кнопку, автоматически появляются во всех

MaksimL 10.12.2020 15:18

Пожалуйста, предоставьте правильный минимально воспроизводимый пример того, что вы делаете. Например, элементы .portfolio_item.invisible, которые вы пытаетесь выбрать, не могут быть найдены нигде в показанном вами HTML — так как же мы можем сказать, что на самом деле происходит?

CBroe 10.12.2020 15:24

Я добавил фрагмент кода, но в этой среде скрытые элементы отображаются при запуске фрагмента кода.

MaksimL 10.12.2020 15:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
470
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, я нашел причину. Из невидимых элементов в портфеле_item - удалить все классы по умолчанию. И добавляйте этот класс только тогда, когда нажимается кнопка «Загрузить еще».

Другие вопросы по теме