主页 / 问题 / 933521
Accepted
Alisa Bondarchuk
Asked:2020-01-18 13:22:59 +0000 UTC2020-01-18 13:22:59 +0000 UTC

如何创建一个简单的按钮状态切换器？

  • 772

我们需要一个纯JS中的简单按钮状态开关。

例如有4 个按钮，前两个应该可见，后两个应该隐藏。还有两个切换按钮"вперёд" и "назад"。

有必要在按下按钮"вперёд"时，如果当前按钮，例如“按钮可见”按钮是可见的，那么它仍然是可见的，如果它是隐藏的，例如，我们已经到达按钮Button Hidden One，那么它应该出现在两个可见按钮的底部，即 底部Button Visible一和Button Visible Two。

当切换到4时，按钮 - 3应该滚下（即从 切换Button Hidden One到 时Button Hidden Two，Button Hidden One它应该滚下），并且4会出现在它的位置。当使用按钮从第一个按钮切换到最后一个按钮时， 4 个不可见按钮应出现在2 个"назад"可见按钮的底部，即 在底部，应该出现。 Button Visible OneButton Visible TwoButton Hidden Two

<!-- Cписок с кнопками -->
<ul>
  <li><button class="btn" />Button Visible One</li>
  <li><button class="btn" />Button Visible Two</li>
  <li><button class="btn" />Button Hidden One</li>
  <li><button class="btn" />Button Hidden Two</li>
</ul>

<!-- Кнопки для передвижения -->
<button id="previous">Previos</button>
<button id="next">Next</button>

javascript

1 个回答

  1. Best Answer

    function step(prev) {
  let child = list.querySelector('[data-hidden="0"]');
  if (child) {
    child.dataset.hidden = 1;
    while (child.dataset.hidden != 0) {
      child = child[prev ? "previousElementSibling" : "nextElementSibling"];
      if (!child) {
        child = list[prev ? "lastElementChild" : "firstElementChild"]
      }
      if (child.dataset.hidden == 1) {
        child.dataset.hidden = 0;
      }
    }
  } else {
    child = list.querySelector('[data-hidden="1"]');
    if (child) {
      child.dataset.hidden = 0
    }
  }
}

previous.addEventListener("click", () => step(true));

next.addEventListener("click", () => step());
    [data-hidden="1"] {
  display: none
}
    <!-- Cписок с кнопками -->
<ul id="list">
  <li><button class="btn" />Button Visible One</li>
  <li><button class="btn" />Button Visible Two</li>
  <li data-hidden="1"><button class="btn" />Button Hidden One</li>
  <li data-hidden="1"><button class="btn" />Button Hidden Two</li>
</ul>

<!-- Кнопки для передвижения -->
<button id="previous">Previos</button>
<button id="next">Next</button>

    • 1

相关问题