[英]What would be a better way to write switching 2 state code in JavaScript?
So im writing some code for a website that i've implemented which is a simple hide/show function.所以我为一个我已经实现的网站编写了一些代码,这是一个简单的隐藏/显示功能。 And i've been thinking about how I can go about writing this or similar code shorter, concise or more efficient.我一直在考虑如何编写更短、更简洁或更高效的此或类似代码。
To be specific, how to easily have a "switch" state that switches between 2 if statements.具体来说,如何轻松拥有在 2 个 if 语句之间切换的“切换”状态。
let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
selectedArrow[i].addEventListener('click', function() {
let id = event.target;
let target = event.target.parentElement.nextElementSibling;
if(state === 0) {
id.style.transform = 'rotate(-90deg)'
target.style.display = 'none';
state = 1;
} else if(state === 1) {
id.style.transform = 'rotate(0deg)'
target.style.display = 'grid';
state = 0;
}
});
}
This code works perfectly fine, just wondering if others have any other tricks as i'm a beginner coder.这段代码工作得很好,只是想知道其他人是否有任何其他技巧,因为我是一个初学者编码器。
I hope this helps, here i use marker class in dom to store state:我希望这会有所帮助,在这里我使用 dom 中的标记类来存储状态:
let bindClick = e => e.onclick = e => e.target.classList.toggle('active'); [...document.querySelectorAll('.arrows')].forEach(bindClick)
.arrows { border: solid; width: 50px; display: inline-block; line-height: 50px; text-align: center; font: 44px arial; margin: 10px; cursor: pointer; transition: ease-in 300ms; } .active { color: red; transform: rotate(-45deg); }
<div class='arrows active'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows active'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>
[...expr]
is used because forEach
iteration over NodeList
which returned from document.querySelectorAll
dont implemented in some browsers... or implemented not so long time ago [...expr]
是因为从document.querySelectorAll
返回的NodeList
上的forEach
迭代没有在某些浏览器中实现......或者不久前实现
Here is alternative if you dont want to use styling for manage state represenation:如果您不想使用样式来管理状态表示,这是替代方法:
[...document.querySelectorAll('.arrows')].forEach(e => e.onclick = e => { e.target.classList.toggle('active'); let v = e.target.classList.contains('active'); e.target.style.transform = `rotate(${v ? -45 : 0}deg)`; e.target.style.color = v ? 'red' : 'black'; })
.arrows { border: solid; width: 50px; height: 50px; display: inline-block; line-height: 50px; text-align: center; font-size: 40px; margin: 10px; cursor: pointer; }
<div class='arrows'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>
Firstly, function switch
will error out - this doesn't need the switch
(it's reserved anyway).首先, function switch
会出错——这不需要switch
(无论如何它都是保留的)。 Secondly, you can use some fancy ternaries and template literals:其次,你可以使用一些花哨的三元组和模板文字:
let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
selectedArrow[i].addEventListener('click', function() {
let id = event.target;
let target = event.target.parentElement.nextElementSibling;
id.style.transform = `rotate(${-90 + (state * 90)})`;
target.style.display = id ? "grid" : "none";
state = state ? 0 : 1;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.