javascript - 进入下一个按钮链

Question

我正在尝试创建一个按钮链: 第一选择； - 按钮 1 - 按钮 2

如果选择按钮 1: - 按钮 1a - 按钮 1b

如果选择按钮 1a: - 按钮 1aa - 按钮 1ab

如果选择按钮 1b: - 按钮 1ba - 按钮 1bb

依此类推.. 按钮 2 也是如此。

到目前为止，我得到了这个，但我的 .js 不适合我。

我尝试了两种方式。

方法一: HTML(onclick="nextPush"将以方式 2 进行更改)

  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button id="btn1a" class="btn btn1a" onclick="nextPush(this)">Button 1a</button>
    <button id="btn1b" class="btn btn1b" onclick="nextPush(this)">Button 1b</button>
  </div>
  <div class="buttons2a-b">
    <button id="btn2a" class="btn btn2a">Button 2a</button>
    <button id="btn2b" class="btn btn2b">Button 2b</button>
  </div>
  <div class="buttons1aa-ab">
    <button id="btn1aa" class="btn btn1a">Button 1aa</button>
    <button id="btn1ab" class="btn btn1b">Button 1ab</button>
  </div>
  <div class="buttons1ba-bb">
    <button id="btn1ba" class="btn btn2a">Button 1ba</button>
    <button id="btn1bb" class="btn btn2b">Button 1bb</button>
  </div>

方式一:.JS

function buttonPushed(btn) {
  var replacewith = "buttons1a-b";
  if (btn.id == "btn2") {
    replacewith = "buttons2a-b";
  }

function nextPush(btn) {
  var replacewith = "buttons1aa-ab";
  if (btn.id == "btn1b") {
    replacewith = "buttons1ba-bb";
  }

  var allChildren = document.getElementsByClassName('buttons')[0].children;
  for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    if (child.className != replacewith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

}

方法 2:HTML(注意 onclick="nextPush"不见了)

  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button id="btn1a" class="btn btn1a" onclick="buttonPushed(this)">Button 1a</button>
    <button id="btn1b" class="btn btn1b" onclick="buttonPushed(this)">Button 1b</button>
  </div>
  <div class="buttons2a-b">
    <button id="btn2a" class="btn btn2a">Button 2a</button>
    <button id="btn2b" class="btn btn2b">Button 2b</button>
  </div>
  <div class="buttons1aa-ab">
    <button id="btn1aa" class="btn btn1a">Button 1aa</button>
    <button id="btn1ab" class="btn btn1b">Button 1ab</button>
  </div>
  <div class="buttons1ba-bb">
    <button id="btn1ba" class="btn btn2a">Button 1ba</button>
    <button id="btn1bb" class="btn btn2b">Button 1bb</button>
  </div>

方式 2.JS

function buttonPushed(btn) {
  /* btn = Id: btn1, btn2, btn1a or btn1b */
  let replacewith = "buttons1a-b";
    if (btn.id == "btn2") {
      replacewith = "buttons2a-b";
    }
    else if (btn.id == "btn1a") {
      replacewith = "buttons1aa-ab";
    }
    else if (btn.id == "btn1b") {
      replacewith = "buttons1ba-bb";
    }
} 

  let allChildren = document.getElementsByClassName('buttons')[0].children;
  for (let i = 0; i < allChildren.length; i++) {
    let child = allChildren[i];
    if (child.className != replacewith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

.CSS 用于两种方式:

.buttons1a-b {
  display: none;
}

.buttons2a-b {
  display: none;
}

.buttons1aa-ab {
  display: none;
}

.buttons1ba-bb {
  display: none;
}

抱歉发了这么长的帖子，希望你能帮助我 :) 如果你知道更好的方法，也请告诉我。

Answer 1

基于您的示例和来自 Michael 的示例，您还可以使用另一种方法，即通过将属性附加到按钮来声明要显示的 div，然后将事件监听器添加到具有该属性的所有按钮。这使 HTML 稍微更小，更具声明性，并且更容易切换您接下来要显示的元素，而不是依赖于特定的 id 架构。

(function(document) {
  // get all buttons that have the attribute data-next
  const buttons = document.querySelectorAll('[data-next]');
  for (const item of buttons) {
    // get references to the parent item and next item to hide/show
    const parentId = item.getAttribute('data-parent');
    const parent = document.querySelector(`#${parentId}`);
    const nextDivId = item.getAttribute('data-next');
    const nextDiv = document.querySelector(`#${nextDivId}`);
    if (!nextDiv) {
      console.error('could not find next div for button ', item);
    }
    // attach an event listener for click that toggles visibility of the above elements
    item.addEventListener('click', function() {
      nextDiv.classList.toggle('hidden');
      parent.classList.toggle('hidden');
    });
  }
})(document);

.hidden {
  display: none;
}

<div id="base">
  <button data-next="option-a" data-parent="base">Option A</button>
  <button data-next="option-b" data-parent="base">Option B</button>
</div>

<div id="option-a" class="hidden">
  <p>Option A</p>
</div>
<div id="option-b" class="hidden">
  <p>Option B</p>
</div>

如果您想动态添加新按钮(或更改您的下一个元素应该是什么)，您需要在创建其他按钮时附加事件监听器。例如，您可以执行以下操作:

(function(document) {
  function onButtonClicked(event) {
    const item = event.target;
    // get references to the next item to show
    const nextDivId = item.getAttribute('data-next');
    const nextDiv = document.querySelector(`#${nextDivId}`);
    if (!nextDiv) {
      console.error('could not find next div for button ', item);
    }
    // The function toggle on classList either removes a class if it exists
    // or adds it if it does not exist in the list of classes on the element
    nextDiv.classList.toggle('hidden');
    // check if container has an attribute for loading next buttons lazily
    const lazyLoadLevel = nextDiv.getAttribute('data-level');
    // if we found the attribute, load the contents
    if (lazyLoadLevel) {
      // cast lazyLoadedLevel to an integer (with +) since getAttribute returns a string
      loadLevel(+lazyLoadLevel, nextDiv);
      // since we have populated the container we can remove the attribute so that elements do not get added again
      nextDiv.removeAttribute('data-level');
    }

    // get references to the parent item to hide
    const parentId = item.getAttribute('data-parent');
    const parent = document.querySelector(`#${parentId}`);
    if (parent) {
      parent.classList.toggle('hidden');
    }
  }

  function addButton(parent, nextElementId, text) {
    const newItem = document.createElement('button');
    newItem.setAttribute('data-next', nextElementId);
    newItem.setAttribute('data-parent', parent.getAttribute('id'));
    newItem.textContent = text;
    newItem.addEventListener('click', onButtonClicked);
    parent.appendChild(newItem);
  }

  function loadLevel(level, container) {
    switch (level) {
      // depending on level you can define other buttons to add here
      case 2:
        {
          addButton(container, 'option-a', 'Goto option a');
          break;
        }
    }
  }

  // get all *existing* buttons that have the attribute data-next
  // this is run once when the script loads, and will not attach listeners to dynamically created buttons
  const buttons = document.querySelectorAll('[data-next]');
  for (const item of buttons) {
    // attach an event listener for click that toggles visibility of parent and next elements
    // notice that we pass a reference to onButtonClicked. Even though it is a function we shouldn't call it *here*
    item.addEventListener('click', onButtonClicked);
  }
})(document);

.hidden {
  display: none;
}

<div id="base">
  <button data-next="option-a" data-parent="base">Option A</button>
  <button data-next="option-b" data-parent="base">Option B</button>
</div>

<div id="option-a" class="hidden">
  <p>Option A</p>
  <button data-next="option-b" data-parent="option-a">Option B</button>
</div>
<div id="option-b" class="hidden" data-level="2">
  <p>Option B. The contents of this div is loaded lazily based on the value of the attribute data-level</p>
</div>