Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

JS код работает не верно

Добрый день я плохо ориентируюсь в JS помогите пожалуйста доработать код, или подсказать как реализовать задуманное https://jsfiddle.net/donsmirelo/pyr7jn1z/1/.

Есть 4 кнопки при нажатии на которые сменяется блоки контента. В самих блоках находятся блоки которые будут отражать проекты с фото, они сделаны сеткой через display: grid, и данная сетка меняет свою структуру в зависимости от количества блоков внутри (от 1 - 6), он должен считать кол-во блоков внутри контейнера, если блоков 6 то присвоить класс .contBox6 если блоков 4 то присвоить класс .contBox4, если элементов больше 6-ти то должна сработать пагинация на конкретный активный блок.

При нажатии на кнопки необходимый блок получает класс active, а другие скрываются.

Внутри contBox считается кол-во блоков и в зависимости от их кол-ва определяется класс с необходимой сеткой в CSS, так вот для первого блока он считает все хорошо и определяет его, а когда переключаюсь на другие блоки он уже не считает или считает только самый первый блок, а остальные игнорирует. Подскажите пожалуйста как сделать что бы он считал у всех элементов или активного и задавал ему правильный класс?

И по возможности подскажите пожалуйста как сделать пагинацию для каждого блока, буду это на вордпресс натягивать потом, необходимо что бы в этих разделах при кол-ве блоков больше 6-ти шт появлялась пагинация и возможность перелистывать следующую страницу этого блока. Очень близкий пример на этом сайте https://eventum-premo.ru/ в разделе "Проекты" для понимания результата.

По дате
По рейтингу
Аватар пользователя
Новичок
5лет

Вместо всего написанного кода...
_____________________________

$(document).ready(function() {
$('.contBox').each(function(){
var children = $(this).children('div');
var len = children.length;

$(this).removeClass('contBox').addClass('contBox' + len);

children.each(function(i) {
$(this).addClass('boxbox' + (i + 1));
});
});

$('.menu-obj .btn').on('click', function(){
var index = $('.menu-obj .btn').index( $(this) );

$('.block.active').removeClass('active');
$('.block').eq(index).addClass('active');
});
});

__________________

Соответственно, все дата-атрибуты и id не нужны.