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

Question

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

Илья Смирнов Мастер (1064), закрыт 4 года назад

Добрый день я плохо ориентируюсь в 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/ в разделе "Проекты" для понимания результата.

Answer 1

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

$(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 не нужны.