javascript - 纯 javascript 只切换一次使用 data-getAttribute 来比较

Question

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

Link to jsFiddle

//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")

由于“隐藏”类被删除，它不再起作用(但它仍然具有“选项”类。)