首頁猿問 javascript for...

javascript for in 與 $().bind結(jié)合出現(xiàn)奇怪的問題！

JavaScript

開心每一天1111 2019-04-16 20:27:22

問題函數(shù)bindInputBlur()綁定輸入框的輸入內(nèi)容格式限制，但是用了forin來循環(huán)綁定bind，結(jié)果卻發(fā)現(xiàn)當(dāng)觸發(fā)input.bind-email的onblur事件的時候，觸發(fā)的是arrRegExp的最后一個bind-hobby而不是bind-email。代碼bindInputBlur();functionbindInputBlur(){vararrRegExp={'bind-email':["[^a-zA-Z0-9\.@-]+",20],'bind-qq':['(^0|[\D]+)',14],'bind-phone':['(^0|[\D]+)',11],'bind-mobile':['(^0|[\D]+)',11],'bind-vcode-4':['[^a-zA-Z0-9]+',4],'bind-vcode-sms':['[\D]',6],'bind-cardNo':['[\D]+',18],'bind-cardPwd':['[\D]+',18],'bind-username':['[^a-zA-Z0-9]',18],'bind-hobby':['',13]}varbindString='blurkeyupkeypressclick';for(variinarrRegExp){$('.'+i).bind(bindString,function(){console.log(i,arrRegExp[i]);if(!this.value||!(iinarrRegExp))return;var_regFind=arrRegExp[i][0]||'';var_maxLen=arrRegExp[i][1]||0;if(_regFind){varregExp=newRegExp(_regFind,'g');if(regExp&®Exp.test(this.value)){this.value=this.value.replace(regExp,'');}}if(typeof_maxLen=='number'&&_maxLen&&this.value.length>_maxLen){this.value=this.value.substring(0,_maxLen);}});}}

查看完整描述

2 回答

有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗獲得超8個贊

教科書式的閉包問題+1因為是過來人，所以給你舉個簡單易懂的例子，如果你想了解閉包的更多知識，請閱讀閉包在JavaScript中的解釋。//以下代碼不會像你期望的那樣工作，因為變量‘i’沒有被鎖定，每次點擊//時警示窗都會顯示全部的元素數(shù)目，因為在那個點上它正是變量‘i’的值varelems=document.getElementsByTagName('a');for(vari=0;ielems[i].addEventListener('click',function(e){e.preventDefault();alert('我是鏈接#'+i);},'false');}//以下的代碼可以達(dá)到我們的目的，在這個IIFE閉包中，變量‘i’像一個//‘鎖定索引’被鎖在其中。當(dāng)循環(huán)結(jié)束執(zhí)行時，盡管變量‘i’的值是元素的總數(shù)//但在IIFE閉包中，‘鎖定索引’的值總是當(dāng)時方法被調(diào)用時傳入的‘i’值，因此//當(dāng)一個鏈接被點擊時，警示窗就會顯示正確的值了。varelems=document.getElementsByTagName('a');for(vari=0;i(function(lockedInIndex){elems[i].addEventListener('click',function(e){e.preventDefault();alert('我是鏈接#'+lockedInIndex);},'false');})(i);}//你也可以像這樣使用一個IIFE，雖然效果相同，但我覺得上面的寫法可讀性更高。varelems=document.getElementsByTagName('a');for(vari=0;ielems[i].addEventListener('click',(function(lockedInIndex){returnfunction(e){e.preventDefault();alert('我是鏈接#'+lockedInIndex);};})(i),'false');}參考鏈接