if...else..的错误用法

来源：懂视网责编：小采时间：2020-11-27 20:31:43

if...else..的错误用法

if...else..的错误用法:1.最近在写js代码完成一个前段DOM操作的函数时，自己错误的使用了if..else..控制体。为什么是错误的呢？看看我的代码你就明白了：document.getElementsByClassName('eButton')[0].onclick=function(){ var checked

推荐度：

点击下载本文 文档为doc格式

导读if...else..的错误用法:1.最近在写js代码完成一个前段DOM操作的函数时，自己错误的使用了if..else..控制体。为什么是错误的呢？看看我的代码你就明白了：document.getElementsByClassName('eButton')[0].onclick=function(){ var checked

1.最近在写js代码完成一个前段DOM操作的函数时，自己错误的使用了if..else..控制体。为什么是错误的呢？看看我的

代码你就明白了：

document.getElementsByClassName('eButton')[0].onclick=function(){
 var checked=document.getElementsByClassName('checked');
 var eButton=document.getElementsByClassName('eButton')[0];
 if(checked.length==0){
 alert('请选择要编辑的联系人！');
 }else{
 if(checked.length >2){
 alert('每次编辑只能选择一条记录');
 }else{
 if(checked[0].childNodes[0].id=='check-all'){
 var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;
 var name=checked[1].parentNode.nextElementSibling.innerHTML;
 document.getElementsByClassName('edit_contact_name')[0].value=name;
 document.getElementsByClassName('edit_contact_email')[0].value=email;
 var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
 if(group.innerHTML !="default"){
 var group_id=group.getAttribute('group_id')
 document.getElementsByClassName('edit_contact_group_name')[0].value=id;
 }
 $('#edit_contact').modal();
 }else{
 if(checked.length ==2){
 alert('每次编辑只能选择一条记录');
 }else{
 var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;
 var name=checked[0].parentNode.nextElementSibling.innerHTML;
 document.getElementsByClassName('edit_contact_name')[0].value=name;
 document.getElementsByClassName('edit_contact_email')[0].value=email;
 var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
 if(group.innerHTML !="default"){
 var group_id=group.getAttribute('group_id')
 document.getElementsByClassName('edit_contact_group_name')[0].value=id;
 }
 $('#edit_contact').modal();
 }
 }
 }
 }
 };

哈哈，看到自己写的这些代码，突然感觉这个函数一定很厉害。整个函数被if..else..搞得乱七八糟的，开始思考为什么当时要用if..else

，其实当时只是考虑到这个逻辑中有大概三四种不同的条件，要执行三四种运算，而且每次只能执行一种情况（执行完就到函数结尾），这些就是程序的执行流程。有了这个流程，自己开始考虑怎么把代码改改，改的一目了然，改的易于维护。这个时候自己自然而言的想到了"return"这个关键字，使用”return“后就有了下面的代码：

document.getElementsByClassName('eButton')[0].onclick=function(){
 var checked=document.getElementsByClassName('checked');
 var eButton=document.getElementsByClassName('eButton')[0];
 if(checked.length==0){
 alert('请选择要编辑的联系人！');
 return;
 }
 if(checked.length ==1){
 var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;
 var name=checked[0].parentNode.nextElementSibling.innerHTML;
 document.getElementsByClassName('edit_contact_name')[0].value=name;
 document.getElementsByClassName('edit_contact_email')[0].value=email;
 var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
 if(group.innerHTML !="default"){
 var group_id=group.getAttribute('group_id')
 document.getElementsByClassName('edit_contact_group_name')[0].value=id;
 }
 $('#edit_contact').modal();
 return;
 }
 if(checked.length ==2){
 if(checked[0].childNodes[0].id=='check-all'){
 var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;
 var name=checked[1].parentNode.nextElementSibling.innerHTML;
 document.getElementsByClassName('edit_contact_name')[0].value=name;
 document.getElementsByClassName('edit_contact_email')[0].value=email;
 var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
 if(group.innerHTML !="default"){
 var group_id=group.getAttribute('group_id')
 document.getElementsByClassName('edit_contact_group_name')[0].value=id;
 }
 $('#edit_contact').modal();
 return;
 }
 alert('每次编辑只能选择一条记录');
 return;
 }
 if(checked.length >2){
 alert('每次编辑只能选择一条记录');
 }
};

下面这些条件罗列起来代码就清晰多了：

1.checked.length ==0

2.checked.length ==1

3.checked.length ==2

4.checked.length > 2

接下来把重复的代码封装到函数中（去除重复）得到代码：

function get_edit_modal_content(node_num,checked){
 var email=checked[node_num].parentNode.nextElementSibling.nextElementSibling.innerHTML;
 var name=checked[node_num].parentNode.nextElementSibling.innerHTML;
 var contact_id=checked[node_num].parentNode.nextElementSibling.getAttribute('contact_id')
 var regular_name=/[\u4E00-\u9FA5\uF900-\uFA2D\w]*/;
 name=regular_name.exec(name)[0];
 document.getElementsByClassName('edit_contact_id')[0].value=contact_id;
 document.getElementsByClassName('edit_contact_name')[0].value=name;
 document.getElementsByClassName('edit_contact_email')[0].value=email;
 var group=checked[node_num].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
 if(group.innerHTML !="default"){
 var group_id=group.getAttribute('group_id')
 document.getElementsByClassName('edit_contact_group_name')[0].value=group_id;
 }
 }
 document.getElementsByClassName('eButton')[0].onclick=function(){
 var checked=document.getElementsByClassName('checked');
 if(checked.length==0){
 alert('请选择要编辑的联系人！');
 return;
 }
 if(checked.length==1){
 get_edit_modal_content(0,checked);
 $('#edit_contact').modal();
 return;
 }
 if(checked.length==2){
 if(checked[0].childNodes[0].id=='check-all'){
 get_edit_modal_content(1,checked);
 $('#edit_contact').modal();
 return;
 }
 alert('每次编辑只能选择一条记录');
 return;
 }
 if(checked.length >2){
 alert('每次编辑只能选择一条记录');
 return;
 }
 };

if...else..的错误用法

推荐度：

点击下载本文 文档为doc格式

标签：使用用法使用方法

热门焦点

if...else..的错误用法

if...else..的错误用法

if...else..的错误用法

最新推荐

猜你喜欢

热门推荐