减少代码冗余
前言 在写一个项目的时候发现一个页面有许多弹窗触发，一开始写的时候通过ID名选中元素并设置显示或不显示。后来发现一个弹窗还好，当出现若干弹窗的时候代码重复度非常高，非常冗余。
因为每个弹窗固定的位置都有一个关闭按钮，按钮的位置是每个父级div下的一个元素节点。所以我想在点击事件后传入dom元素的父节点的ID，以此来绑定父级ID。因此用show()函数设置元素显示，通过hide()函数设置函数隐藏。
1
2
3
4
| <div id="please_login">
<div class="btn_close " onclick="hide(this.parentNode.id)"></div>
<div class="login" onclick="login()"></div>
</div>
|
1
2
3
4
5
6
7
8
9
10
| function show(node) {
var nodeId = document.getElementById(node);
nodeId.style.display = 'block';
}
function hide(node) {
var nodeId = document.getElementById(node);
nodeId.style.display = 'none'
}
|
完成后减少了40行左右的代码，看起来更加清爽了。
但我过了一天发现其实可以把两个函数写成一个啊
1
2
3
4
5
6
7
8
| function ShowHide(state){
var b = document.getElementById(state);
if(b.style.display != 'none'){
b.style.display = 'none'
}else{
b.style.display = 'block';
}
}
|
