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

问题描述

我正在尝试构建具有选项卡式内容功能的多个元素。如何对 var 中声明的多个元素使用相同的函数？ 例如。克隆具有相似内容但不同 id 和区域标签的父 div.tabs 元素；不要介意仅用于片段视觉效果的 CSS ts

        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>

解决方法

最后我找到了一个解决方案，也许不是最好的方法，但它有效。我为每个标签容器添加了一个唯一 ID：

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

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

使用 getElementsByClassName 创建元素列表，并将我的函数和事件侦听器放置在 for 循环中，以元素列表长度作为条件。毕竟用从元素列表中选择的 id 名称 querySelector 替换了类名称 .id。循环变量控制的数组项。

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 => { ... });      
                
            }

}