将我的 JQuery function 转换为 vanilla js - 多个 forEach 的问题？

Question

我注意到转换 JQuery function 需要更多代码才能在 vanilla JS 中转换。

我正在尝试转换以下代码：

$('.tabs__toggle').click(function () {
    $('.tabs__single').removeClass('tabs__single--active');
    $(".tabs__single[data-id='" + $(this).attr('data-id') + "']").addClass(
        'tabs__single--active'
    );
    $('.tabs__toggle').removeClass('tabs__toggle--active');
    $(this).parent().find('.tabs__toggle').addClass('tabs__toggle--active');
});

默认情况下，您不需要在 JQuery 上使用forEach点击来添加点击事件。

这是我试图转换的代码：

const Toggles = tabs.querySelectorAll('.tabs__toggle');

const onToggleClick = (toggle) => {
    $('.tabs__single').removeClass('tabs__single--active');
    $(".tabs__single[data-id='" + $(this).attr('data-id') + "']").addClass(
        'tabs__single--active'
    );
};

Toggles.forEach((toggle) => {
    toggle.addEventListener('click', onToggleClick.bind(null, toggle));
});

但是我被"tabs__single"困住了，我必须在ForEach中添加一个forEach 。

HTML：

<div data-rel="tabs" class="tabs">
    <aside class="tabs__sidebar">
        <h3 class="tabs__pretitle">Filter op:</h3>
        <ul class="tabs__menu">
            <li><a href="#" class="tabs__toggle" data-id="department-fashion">Fashion</a></li>
            <li><a href="#" class="tabs__toggle" data-id="department-lifestyle">Lifestyle</a></li>
            <li><a href="#" class="tabs__toggle" data-id="department-gifts">Gifts</a></li>
            <li><a href="#" class="tabs__toggle" data-id="department-horeca">Horeca</a></li>
        </ul>
    </aside>

    <div class="tabs__single" data-id="department-fashion">
        <h2>Fashion</h2>
    </div>

    <div class="tabs__single" data-id="department-lifestyle">
        <h2>Lifestyle</h2>
    </div>

    <div class="tabs__single" data-id="department-gifts">
        <h2>Gifts</h2>
    </div>

    <div class="tabs__single" data-id="department-horeca">
        <h2>Horeca</h2>
    </div>
</div>

有人可以帮我转换一下吗？

Answer 1

您确实需要事件处理程序中的另一个forEach()来循环.tabs__single集合。 这是 jQuery 为您做的事情，您需要在本机 JS 中手动完成。

代码最终将如下所示。 请注意在onToggleClick function arguments 中使用Event object 而不是不必要地绑定到toggle实例。 这种模式内置于 JS 中，并且更加普遍且易于使用。

 const tabs = document.querySelector('.tabs'); const toggles = tabs.querySelectorAll('.tabs__toggle'); const tabsContent = document.querySelectorAll('.tabs__single'); const onToggleClick = e => { // set class on active tab let activeTab = document.querySelector('.tabs__toggle.tabs__toggle--active'); activeTab && activeTab.classList.remove('tabs__toggle--active'); e.target.classList.add('tabs__toggle--active'); // display active tab content let targetId = e.target.dataset.id; tabsContent.forEach(el => { el.classList[el.dataset.id === targetId? 'add': 'remove']('tabs__single--active'); }); }; toggles.forEach(toggle => { toggle.addEventListener('click', onToggleClick); });

 .tabs__single { display: none; }.tabs__single--active { display: block; }.tabs__toggle--active { color: #C00; }

 <div data-rel="tabs" class="tabs"> <aside class="tabs__sidebar"> <h3 class="tabs__pretitle">Filter op:</h3> <ul class="tabs__menu"> <li><a href="#" class="tabs__toggle" data-id="department-fashion">Fashion</a></li> <li><a href="#" class="tabs__toggle" data-id="department-lifestyle">Lifestyle</a></li> <li><a href="#" class="tabs__toggle" data-id="department-gifts">Gifts</a></li> <li><a href="#" class="tabs__toggle" data-id="department-horeca">Horeca</a></li> </ul> </aside> <div class="tabs__single" data-id="department-fashion"> <h2>Fashion</h2> </div> <div class="tabs__single" data-id="department-lifestyle"> <h2>Lifestyle</h2> </div> <div class="tabs__single" data-id="department-gifts"> <h2>Gifts</h2> </div> <div class="tabs__single" data-id="department-horeca"> <h2>Horeca</h2> </div> </div>

Answer 2

只是一个带有 querySelector all 并使用 classList 的 forEach

 document.querySelectorAll('.tabs__toggle').forEach(elem => { elem.addEventListener("click", evt => { document.querySelectorAll('.tabs__single--active').forEach(selected => { selected.classList.remove('tabs__single--active'); }); var selectedToggle = document.querySelector('.tabs__toggle--active'); if (selectedToggle) selectedToggle.classList.remove('tabs__toggle--active'); var id = elem.dataset.id; document.querySelectorAll(`.tabs__single[data-id='${id}']`).forEach(selected => { selected.classList.add('tabs__single--active'); }); elem.classList.add('tabs__toggle--active'); }); });

 .tabs__toggle--active { background-color: yellow; }.tabs__single--active { background-color: lime; }

 <div class="tabs__toggle" data-id="foo">Foo</div> <div class="tabs__toggle" data-id="bar">Bar</div> <div class="tabs__single" data-id="foo">Foo 1</div> <div class="tabs__single" data-id="foo">Foo 2</div> <div class="tabs__single" data-id="foo">Foo 3</div> <div class="tabs__single" data-id="bar">Bar 1</div> <div class="tabs__single" data-id="bar">Bar 2</div> <div class="tabs__single" data-id="bar">Bar 3</div>

如果它只是单个活动的单个元素，则不需要 forEach

 document.querySelectorAll('.tabs__toggle').forEach(elem => { elem.addEventListener("click", evt => { const selected = document.querySelector('.tabs__single--active'); if (selected) selected.classList.remove('tabs__single--active'); const selectedToggle = document.querySelector('.tabs__toggle--active'); if (selectedToggle) selectedToggle.classList.remove('tabs__toggle--active'); const id = elem.dataset.id; document.querySelector(`.tabs__single[data-id='${id}']`).classList.add('tabs__single--active'); elem.classList.add('tabs__toggle--active'); }); });

 .tabs__toggle--active { background-color: yellow; }.tabs__single--active { background-color: lime; }

 <div class="tabs__toggle" data-id="foo">Foo</div> <div class="tabs__toggle" data-id="bar">Bar</div> <div class="tabs__single" data-id="foo">Foo 1</div> <div class="tabs__single" data-id="bar">Bar 1</div>