У меня есть фильтруемые вкладки и фотографии по категориям. Первая категория — Все, и еще 4 категории. У меня есть две функции:
Для фильтрации:
$(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);
}
});
});
});
Кнопка «Загрузить еще» загружает еще 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>
Вы только что добавили класс active
с помощью $(this).addClass("active")
, поэтому теперь не нужно искать, какой элемент имеет этот класс — это $(this)
. Так что теперь вы можете просто проверить $(this).hasClass('loadbtn')
.
Когда я добавляю if ($(this).hasClass('loadbtn')) { $(".load_btn").show(); } еще { $(".load_btn").hide(); } Затем, когда я возвращаюсь ко всем, он появляется там, но все скрытые фотографии, которые должны появиться при нажатии на кнопку, автоматически появляются во всех
Пожалуйста, предоставьте правильный минимально воспроизводимый пример того, что вы делаете. Например, элементы .portfolio_item.invisible
, которые вы пытаетесь выбрать, не могут быть найдены нигде в показанном вами HTML — так как же мы можем сказать, что на самом деле происходит?
Я добавил фрагмент кода, но в этой среде скрытые элементы отображаются при запуске фрагмента кода.
Хорошо, я нашел причину. Из невидимых элементов в портфеле_item - удалить все классы по умолчанию. И добавляйте этот класс только тогда, когда нажимается кнопка «Загрузить еще».
«Я пытался добавить этот код в первую функцию» — пожалуйста, покажите подобные вещи в контексте, иначе мы не сможем сказать, где вы на самом деле добавили этот код.