如何多次调用一个函数，纯JS

Question

I am trying to build a multiple elements with tabbed content functionality. How can I use the same function with multiple elements declared in var? Eg to have cloned parent div.tabs element with similar content but different ids and area-labels; Don't mind the CSS ts just for snippet visuals

 const tab = document.querySelector('.tabs'); const tabButtons = tab.querySelectorAll('[role="tab"]'); const tabPanels = Array.from(tab.querySelectorAll('[role="tabpanel"]')); function tabClickHandler(e) { //Hide All Tabpane tabPanels.forEach(panel => { panel.hidden = 'true'; }); //Deselect Tab Button tabButtons.forEach( span => { span.setAttribute('aria-selected', 'false'); }); //Mark New Tab e.currentTarget.setAttribute('aria-selected', 'true'); //Show New Tab const { id } = e.currentTarget; const currentTab = tabPanels.find( panel => panel.getAttribute('aria-labelledby') === id ); currentTab.hidden = false; } tabButtons.forEach(span => { span.addEventListener('click', tabClickHandler); });

 /* Tabs Styling */ .tabs [role="tablist"] > h3 { cursor: pointer; } .tabs [role="tablist"] > h3[aria-selected="true"] { color: #4fcbf2; } .tabs [role="tabpanel"] p { position: absolute; background-color: #eff1f2; padding: 1.8em 2.2em; } .wp-block-columns { display: flex; margin-bottom: 1.75em; flex-wrap: wrap; gap: 1em; } .wp-block-columns { flex-wrap: nowrap; } .wp-block-column { flex-basis: 0; flex-grow: 1; }

 <div class="tabs wp-block-columns"> <div class="wp-block-column" role="tablist" aria-label="contractors"> <h3 class="has-normal-font-size" role="tab" aria-selected="true" id="contractors-1">Do you have a limited company that you want to use for international contracting but don't know how?</h3> <h3 class="has-normal-font-size" role="tab" aria-selected="false" id="contractors-2">Do you want to work abroad but are not satisfied with the retentions that</h3> </div> <div class="tabcontent wp-block-column"> <div role="tabpanel" aria-labelledby="contractors-1"><p>Access Tax and Accounting is a firm of accountants that specialises in this fields</p></div> <div role="tabpanel" aria-labelledby="contractors-2" hidden=""><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper</p></div> </div> </div>

Answer 1

Finally I found a solution, maybe not the best way, but it works. I added a unique ID to each tabs container:

<div id="tabs-1" class="tabs wp-block-columns"> ... </div>

<div id="tabs-2" class="tabs wp-block-columns"> ... </div>

Created the list of elements using getElementsByClassName and placed my function and event listener in for loop with element list length as a condition. After all replaced class name querySelector with id name .id selected from elements list. Array item controlled by loop variable.

if (document.getElementsByClassName('tabs').length) {
            
            var tabClass = document.getElementsByClassName("tabs");
            
            for (var i = 0; i < tabClass.length; i++) {
                
                const tab = document.querySelector('#' + tabClass[i].id);

                function tabClickHandler(e) { ... }             
                
                tabButtons.forEach(button => { ... });      
                
            }

}