Question

所以，在我粘贴代码示例之前，我想再解释一下。

基本上我有一个类似于产品版本差异页面的信息页面。列是＆＃34;产品版本＆＃34;和行是＆＃34;功能＆＃34;。但是，我的行是关键字，其他三行是用户可以按下以显示与该关键字相关的信息类型的按钮。每个关键字最多可以包含三种类型的信息，但无论如何......

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

然而，脚本超过350行，我知道我可以使用＆＃34; addeventlistener＆＃34;并且在过去的一天左右一直试图这样做，并且网上似乎没有任何内容与此有关。

以下是该脚本的三个部分：

首先：通过ID为按钮创建变量，为＆＃34; Nav＆＃34;创建另一个变量。通过它的ID。这些按钮/导航组合有55个，所以有110个变量。方式太多了。

注意：＆＃34; showright＃＆＃34;是按钮和＆＃34; menuRight＃＆＃34;是导航的

脚本样本：

＆＃13;

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...

＆＃13;

按钮的HTML如下所示（示例）：

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

基本上正在发生的事情是，现在我们已经获得了任何导航按钮组合的元素，其中点击了该组合的按钮，我在外部.js文件中的javascript将会运行它＃s; s魔法。活跃的＆＃39; bit本质上是给＆＃34;按钮＆＃34; a＆＃34; class = active＆＃34;通知相应的＆＃34; nav＆＃34;它的按钮现在处于活动状态并显示出来。当然，我必须搞乱这个for eventlistener的循环？任何见解或帮助都将非常受欢迎。

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行。

用于多个按钮For循环的Javascript / HTML5 EventListener - 链接到导航

1 个答案: