纯javascript仅使用datagetAttribute切换一次以进行比较

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

本文关键字：一次 比较 javascript datagetAttribute      更新时间：2023-09-26

我有一些问题，我不明白为什么当我点击按钮时它没有切换——它只切换了一次。。。？我无法隐藏元素！！！它应该如何工作病态的第一个按钮它显示元素点击再次隐藏元素！

链接到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>

更改

hidden = $$(".hidden")

至

hidden = $$(".option")

由于类"hidden"被删除，它将不再工作（但它仍然有类"option"。）

您正试图通过.hidden类获取元素以进行切换，但由于隐藏类已经进行了切换，因此永远不会检索到具有.hidden类的元素。您应该使用一个公共的固定类访问这些元素，而该类恰好是.option类。因此将线路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作为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>

相关文章：