我有一些问题,我不明白为什么当我点击按钮时它没有切换——它只切换了一次。。。?我无法隐藏元素!!!它应该如何工作病态的第一个按钮它显示元素点击再次隐藏元素!
链接到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>