Javascript/HTML5 多个按钮 For-Loop 的 EventListener -- Link 到 Nav

Question

因此，在粘贴我的代码示例之前，我想再解释一下。

基本上我有一个信息页面，其组织方式类似于产品版本差异页面。列为 "product versions"，行为 "features"。但是，我的行是关键字，其他三行是按钮，用户可以按下这些按钮来显示与该关键字相关的信息类型。每个关键字最多可以有三种类型的信息，但无论如何...

它的代码有效，但是，我有 55 个按钮，跨越至少 30 个关键字（一些关键字具有不止一种类型的信息）。我已经可以使用我摆弄过的 .js 文件了。

但是，该脚本超过 350 行，我知道我可以将 for 循环与 "addeventlistener" 一起使用，并且在过去一天左右一直在尝试这样做，网上似乎没有任何内容与这个。

这是脚本的三个部分：

首先：通过按钮的 ID 从按钮创建一个变量，并通过其 ID 为 "Nav" 创建另一个变量。这些 buttons/nav 组合中有 55 个，因此有 110 个变量。太多了。

注意："showright#" 是按钮，"menuRight#" 是导航

脚本示例：

var menuRight1 = document.getElementById('cbp-spmenu-s1'),
  showRight1 = document.getElementById('showRight1'),
  menuRight2 = document.getElementById('cbp-spmenu-s2'),
  showRight2 = document.getElementById('showRight2'),
  menuRight3 = document.getElementById('cbp-spmenu-s3'),
  showRight3 = document.getElementById('showRight3'),
  //....continue to showright55 and menuRight55....
  //Next up is the section where we use an "onclick" for each     
  //button...so....55 of these
  showRight1.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(menuRight1, 'cbp-spmenu-open');
    disableOther('showRight1');
  };
showRight2.onclick = function() {
  classie.toggle(this, 'active');
  classie.toggle(menuRight2, 'cbp-spmenu-open');
  disableOther('showRight2');
};
//lastly, disabling the other buttons until the button clicked, is
//clicked again to disable it (prevents users from opening more than one
//'info' at once
function disableOther(button) {
    if (button !== 'showRight1') {
      classie.toggle(showRight1, 'disabled');
    }
    if (button !== 'showRight2') {
      classie.toggle(showRight2, 'disabled');
    }
    if (button !== 'showRight3') {
      classie.toggle(showRight3, 'disabled');
    }
    if (button !== 'showRight4') {
      classie.toggle(showRight4, 'disabled');
    }
  }
  //....all the way to showRight55 and menuRight55...

按钮的 HTML 看起来像这样（示例）：

<table>
  <tr>
    <th class="spaan9">
      Keyword
    </th>
    <th class="spaan1">
      <div class="main1">
        <section>
          <!-- Class "cbp-spmenu-open" gets applied to menu -->
          <button id="showRight36" style="margin: 0px auto; position: relative;">
            Select
          </button>
        </section>
      </div>
    </th>
    <th class="spaan1">
    </th>
    <th class="spaan1">
    </th>
  </tr>
</table>

导航的 HTML 看起来像这样（样本）：

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s37">
  <h3 class="text-center">
            Header Information
        </h3>
     <!--Random Information to show user here-->
</nav>

基本上发生的事情是，现在我们已经获得了用于单击该组合按钮的任何导航按钮组合的元素，我在外部 .js 文件中的 javascript 将起作用，它是魔法。 'active' 位本质上是给 "button" 一个 "class=active" 来通知相应的 "nav" 它的按钮现在处于活动状态并显示自己。当然，我一定是搞砸了事件监听器的 for 循环？任何见解或帮助将不胜感激。

Answer 1

终于搞清楚了....

虽然花了我一些时间。看来我只需要暂时休息一下。无论如何，这是我的解决方案。

 var showRightBtn = [];
    var menuRightNav = [];
    var i;
    for (var i = 1; i < 58; i++) {
        menuRightNav[i] = document.getElementById("cbp-spmenu-s" + i);
    }
    for (i = 1; i < 58; i++) {
        showRightBtn[i] = document.getElementById("showRight" + i).onclick = function () {
            i = this.id.substring(9, 11); //NOTE: IMPORTANT LINE: Gets number from "activated button" and gives it to proper variables
            classie.toggle(this, 'active');
            classie.toggle(menuRightNav[i], 'cbp-spmenu-open');
            disableOther("showRight" + i);
        }
    }
    function disableOther(button) {
        //if (button == "showRight" + i) {
            //disables buttons below button clicked
            for (var j = 1; j < i; j++) {
                classie.toggle(document.getElementById("showRight" + j), 'disabled');
            }
            //disables buttons above button clicked
            for (var j = 57; j > i; j--) {
                classie.toggle(document.getElementById("showRight" + j), 'disabled');
            }
        //}
    }

将脚本从 700 多行减少到 27 行。

Javascript/HTML5 多个按钮 For-Loop 的 EventListener -- Link 到 Nav

Javascript/HTML5 EventListener for Multiple Buttons For-Loop -- Link to Nav's

javascript

for-loop

click

button

event-listener