pure javascript toggle only once using data-getAttribute 来比较

Question

我有一些问题我不明白为什么当我点击它只切换一次的按钮时它不切换...？而且我无法隐藏该元素！它应该如何在第一个按钮上显示元素时出现问题，再次单击隐藏元素！

//Short cuts
function $(e)
{
  return document.querySelector(e);
}

function $$(e)
{
    return document.querySelectorAll(e);
}
  // All elementis whit toggle-option class
var toggle = $$(".toggle-option");
 //Add EventListener to all buttons whit class toggle-option
for (var i = 0; i < toggle.length; i++)
{
  toggle[i].addEventListener('click', togller, false);
}

function togller()
{
  //clicked element's atribut valuve
  var current = this.getAttribute("data-toggle-number"),
    hidden = $$(".hidden");
  // looop to campare clicked elments's attribut's value whit hidden elements //value     
  for (var i = 0; i < hidden.length; i++)
  {
    var hiddenAtr = hidden[i].getAttribute("data-toggle-number");

    if (current == hiddenAtr)
    {
      if (hidden[i].hasAttribute("data-toggle-number"))
      {
        hidden[i].classList.toggle("hidden")

      }
    }
  }
}

.search-bar {
   height: 50px;
   width: 50px;
   background-color: red;
 }
.add-task-bar {
   height: 50px;
   width: 50px;
   background-color: blue;
 }
 .hidden {
   display: none;
 }

<button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button>
<button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button>

<div class="hidden search-bar option" data-toggle-number="1"></div>
<div class="hidden add-task-bar option" data-toggle-number="2"></div>

Answer 1

改变

hidden = $$(".hidden")

至

hidden = $$(".option")

自从 class 'hidden' 被删除后，它将不再起作用（但它仍然具有 class 'option'。）

Answer 2

您正试图让元素通过 .hidden class 进行切换，但由于隐藏的 class 已经切换，因此永远不会有带有 .hidden [ 的元素=43=] 被检索。您应该使用固定的 class 访问这些元素，而那个元素恰好是 .option class。所以将行 hidden = $$(".hidden"); 更改为 hidden = $$(".option");

除了访问数据属性之外，通过数据集 API 可以更轻松、更快地完成。请看下面的代码。

    function $$(e) {
        return document.querySelectorAll(e);
      }
      // All elementis whit toggle-option class
    var toggle = $$(".toggle-option");
     //Add EventListener to all buttons whit class toggle-option
    for (var i = 0; i < toggle.length; i++) {
      toggle[i].addEventListener('click', togller, false);
    }

    function togller() {
      //clicked element's atribut valuve
      var current = this.dataset.toggleNumber,
        hidden = $$(".option");
      // looop to campare clicked elments's attribut's value whit hidden elements //value     
      for (var i = 0; i < hidden.length; i++) {
        var hiddenAtr = hidden[i].dataset.toggleNumber;
        if (current == hiddenAtr) {
          if (hidden[i].hasAttribute("data-toggle-number")) {
            hidden[i].classList.toggle("hidden")

          }
        }

      }
    }

        .search-bar {
          height: 50px;
          width: 50px;
          background-color: red;
        }
        .add-task-bar {
          height: 50px;
          width: 50px;
          background-color: blue;
        }
        .hidden {
          display: none;
        }

<button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button>
<button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button>

<div class="hidden search-bar option" data-toggle-number="1"></div>
<div class="hidden add-task-bar option" data-toggle-number="2"></div>

此代码的简化 ES6 版本如下所示。请注意，由于在箭头函数中 this 将保持绑定到封闭上下文，因此不需要 current as var current = this.dataset.toggleNumber;

function $$(e) {
  return document.querySelectorAll(e);
}

Array(...$$(".toggle-option")).forEach(e => e.addEventListener('click', togller, false));

function togller() {
  Array(...$$(".option")).forEach(e => {
  (e.dataset.toggleNumber == this.dataset.toggleNumber) &&
  e.classList.toggle("hidden")});
}

        .search-bar {
          height: 50px;
          width: 50px;
          background-color: red;
        }
        .add-task-bar {
          height: 50px;
          width: 50px;
          background-color: blue;
        }
        .hidden {
          display: none;
        }

<button class="fa fa-search fa-lg search-btn toggle-option" data-toggle-number="1">Search</button>
<button class="fa fa-plus-circle fa-lg add-task-btn toggle-option" data-toggle-number="2">addTask</button>

<div class="hidden search-bar option" data-toggle-number="1"></div>
<div class="hidden add-task-bar option" data-toggle-number="2"></div>

pure javascript toggle only once using data-getAttribute 来比较

pure javascript toggle only once using data-getAttribute to to compare

html

javascript

css

toggle