How to make click work in all maps?

  • 0
    How to make the click work on all with one code and not duplicate it and create new id for each card?


    вот таких карт у меня много все один в один , кроме id 
    .col-12.col-md-6.col-sm-12.col-lg-6.col-xl-4                   
                                .cardColors#cardColors
                                    .d-flex.justify-content-between
                                        h4 Профиль: Brusbox 
                                        span#btnHidden x
                                    p   Продукция Rehau обеспечивает плавное открывание, надежное запирание систем, отличается эстетичным дизайном,  доступной ценой, большим сроком службы, высокими качественными характеристиками. Изделия поставляются с гарантией на 10 лет.
                                .cardColors#cardColorsx
                                    .d-flex.justify-content-between
                                        h4 Профиль: Brusbox 
                                        span#btnHiddenx x
                                    p   Продукция Rehau обеспечивает плавное открывание, надежное запирание систем, отличается эстетичным дизайном,  доступной ценой, большим сроком службы, высокими качественными характеристиками. Изделия поставляются с гарантией на 10 лет.
                                .tabCard
                                    h2  Одностворчатое окно
                                    .d-flex.justify-content-center
                                        img(src="../assets/img/brusbox/1.png", alt="brusbox")
                                    .tabCard-info
                                        h4 Профиль: Brusbox (однокамерный)
                                        .d-flex
                                            .tabCard-info_sub
                                                label.d-flex
                                                    input(name="group1" type="radio")
                                                    p Цена c <br> фурнитурой Elementis: <br> 182,68 руб
                                            a.btn-floating.btn-large.pulse#btn
                                                span.material-iconsx i
                                
                                            .tabCard-info_border
                                            .tabCard-info_sub.tabCard-info-iformation
                                                label.d-flex
                                                    input(name="group1" type="radio") 
                                                    p Цена c <br> фурнитурой Roto: <br> 199,48 руб
                                            a.btn-floating.btn-large.pulse#btnx
                                                span.material-icons i                
                                        .d-flex.justify-content-center
                                            button.modal-trigger.mainButtonPrice(data-target='popup-container')
                                                span Заказать замер

    const cardColors = document.getElementById('cardColors');
        const btnHidden = document.getElementById('btnHidden');
        const btn = document.getElementById('btn');
    
        btnHidden.addEventListener('click', () => {
            cardColors.style.opacity = '0';
            cardColors.style.zIndex = '-20';
    
        })
        btn.addEventListener('click', () => {
            cardColors.style.opacity = '1';
            cardColors.style.zIndex = '50';
        })
    JavaScript Anonymous, Jun 15, 2019

  • 2 Answers
  • 0
    const btns = document.querySelectorAll('btn');

    for (btn in btns) {
    btn.addEventListener('click', () => {
    // your actions
    });
    }
    Anonymous

  • 0
    you can use the class and use querySelectorAll - it will return an array. google
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!