Как сократить код jq?

Question

[verstak2020]

Есть слик слайдер, ниже него контейнер с блоками (внутри каждого блока контент к каждому отдельному слайду). Необходимо, реализовать раскрытие блока при клике на слайд (изначально блоки скрыты). Сделал такое, как сократить код, и что бы не менять код после добавления например еще трех слайдов? Если можно с пояснениями.

$(document).ready(function () {
    $('.item-tab1').click(function (evt) {
        evt.preventDefault();
        $('.rent-cards > div').removeClass('active');
        $('.rent-card1').addClass('active');
    })
    $('.item-tab2').click(function (evt) {
        evt.preventDefault();
        $('.rent-cards .rent-card').removeClass('active');
        $('.rent-card2').addClass('active');
    })
    $('.item-tab3').click(function (evt) {
        evt.preventDefault();
        $('.rent-cards .rent-card').removeClass('active');
        $('.rent-card3').addClass('active');
    })
})

Comments

[Вадим]

не менять код после добавления например еще трех слайдов?

Сделать им одинаковый класс, повесить обработчик на родительский контейнер если это возможно, целится по дата-атрибутам в нужные элементы.
Сделайте демку в песочнице, если хотите чтоб Вам прям конкретно ответили.

Answer 1

[Сергей Ульянов]

Просто добавь на item-tab атрибут с цифрой и бери его, как уникальное значение, для всех этих элементов задай одинаковый класс. P.S. Вообще у слика есть уже свой атрибут с цифрой (data-slick-index называется), можно использовать его

$(document).ready(function () {
    $('.item-tab').click(function (evt) {
        evt.preventDefault();
        $('.rent-cards > div').removeClass('active');
        $('.rent-card'+$(this).data('id')).addClass('active');
    })
})