具有匹配索引值的两个数组，Toggle class

Question

我想在不使用任何 jQuery 的情况下使用具有匹配 href 和 id 的 onClick 事件切换 class of show。我已经调试了我的 JavaScrpit 并获得了数据值并将它们排序到它们的数组中。

我只是有点坚持实际使用收集到的数据的剩余部分。

原生 JavaScript

function pageToggleMenu() {
 // Find all name and id attributes
 var anchors = document.getElementsByName('link');
 var ids = document.querySelectorAll('[id]');

 // Store href and id values in an array
 var hrefs = [];
 var idsValue = [];

 // Loop through anchors, get href value and store in aray
 for (var i = 0; i < anchors.length; i++) {
  hrefs.push(anchors[i].href.slice(22));
 }
 // Loop through ids, get id value and store in aray
 for (var o = 0; o < ids.length; o++) {
  idsValue.push(ids[o].id);
 }

 /* If arrays (hrefs & idsValue) index values match then "anchors" 
           element containing relevant "hrefs" value, toggle class("show")
           with element with matching "idsValue".*/
  
} pageToggleMenu();

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div class="sidebar-nav">
                <!-- Dashboard -->
                <button class="dash">
                    <i class="icon-dashboard" aria-hidden="true">
                        <!-- -->
                    </i> Dashboard</button>
                <!-- Explore -->
                <button class="accordion">
                    <i class="icon-explore" aria-hidden="true">
                        <!-- -->
                    </i> Atoms</button>
                <div class="panel nth-explore">
                    <a name="link" href="atoms-global">
                        <p>Global</p>
                    </a>
                    <a name="link" href="#">
                        <p>Buttons</p>
                    </a>
                    <a name="link" href="#">
                        <p>Inputs</p>
                    </a>
                    <a name="link" href="#">
                        <p>Dropdowns</p>
                    </a>
                </div>
                <!-- Automate -->
                <button class="accordion">
                    <i class="icon-automate" aria-hidden="true">
                        <!-- -->
                    </i> Tubs</button>
                <div class="panel nth-automate">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Publish -->
                <button class="accordion">
                    <i class="icon-publish" aria-hidden="true">
                        <!-- -->
                    </i> Organisms</button>
                <div class="panel nth-publish">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Analyse -->
                <button class="accordion">
                    <i class="icon-analyse" aria-hidden="true">
                        <!-- -->
                    </i> Mockups</button>
                <div class="panel nth-analyse">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Settings -->
                <button class="accordion">
                    <i class="icon-settings" aria-hidden="true">
                        <!-- -->
                    </i> Settings</button>
                <div class="panel nth-settings">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
            </div>
        </div>
                <!-- Page Content -->
        <div class="page-content-wrapper" id="dasboard">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Welcome to Atoms</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolores laboriosam saepe fugiat nesciunt simi.</p>
                        <!-- Toggle Button -->
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Atoms: Global -->
        <div class="page-content-wrapper hidden" id="atoms-global">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Global</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolores laboriosam saepe fugiat nesciunt corporis.</p>
                        <!-- Toggle Button -->
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>

Answer 1

我不喜欢匹配 href 和 id 的想法，但现在开始 - 单击 "Global" 菜单将在最后切换

请考虑不要在 <a> 元素中写入 <p> - 这不是一个好的做法

function toggleClass(element, className) {
  if (element) {
    if (element.classList.contains(className)) {
      element.classList.remove(className);
    } else {
      element.classList.add(className);
    }
  }
}

document.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', event => {
    if (event.currentTarget.tagName.toLowerCase() === 'a' && event.currentTarget.name === 'link') {
    event.preventDefault();
      toggleClass(document.getElementById(event.currentTarget.attributes['href'].value), 'hidden');
    }
  });
});

.hidden {
  display: none;
}

<!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div class="sidebar-nav">
                <!-- Dashboard -->
                <button class="dash">
                    <i class="icon-dashboard" aria-hidden="true">
                        <!-- -->
                    </i> Dashboard</button>
                <!-- Explore -->
                <button class="accordion">
                    <i class="icon-explore" aria-hidden="true">
                        <!-- -->
                    </i> Atoms</button>
                <div class="panel nth-explore">
                    <a name="link" href="atoms-global">
                        <p>Global</p>
                    </a>
                    <a name="link" href="#">
                        <p>Buttons</p>
                    </a>
                    <a name="link" href="#">
                        <p>Inputs</p>
                    </a>
                    <a name="link" href="#">
                        <p>Dropdowns</p>
                    </a>
                </div>
                <!-- Automate -->
                <button class="accordion">
                    <i class="icon-automate" aria-hidden="true">
                        <!-- -->
                    </i> Tubs</button>
                <div class="panel nth-automate">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Publish -->
                <button class="accordion">
                    <i class="icon-publish" aria-hidden="true">
                        <!-- -->
                    </i> Organisms</button>
                <div class="panel nth-publish">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Analyse -->
                <button class="accordion">
                    <i class="icon-analyse" aria-hidden="true">
                        <!-- -->
                    </i> Mockups</button>
                <div class="panel nth-analyse">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
                <!-- Settings -->
                <button class="accordion">
                    <i class="icon-settings" aria-hidden="true">
                        <!-- -->
                    </i> Settings</button>
                <div class="panel nth-settings">
                    <a name="link" href="#">
                        <p>Sub-Item One</p>
                    </a>
                    <a name="link" href="#">
                        <p>Sub-Item Two</p>
                    </a>
                </div>
            </div>
        </div>
                <!-- Page Content -->
        <div class="page-content-wrapper" id="dasboard">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Welcome to Atoms</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolores laboriosam saepe fugiat nesciunt simi.</p>
                        <!-- Toggle Button -->
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Atoms: Global -->
        <div class="page-content-wrapper hidden" id="atoms-global">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Global</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolores laboriosam saepe fugiat nesciunt corporis.</p>
                        <!-- Toggle Button -->
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>

具有匹配索引值的两个数组，Toggle class

Two Arrays with matching index values, Toggle class

javascript

arrays

string-matching

原生 JavaScript