在項目中,遇到了一個問題,描述如下:我們在聯動下拉框中,選中值后,會在隱藏的控件中記錄一下選中值的主鍵(展示的是名稱)。但是,在取消選中的時候,沒有把隱藏控件中的value值清空,導致在提交的時候,有時並不是用戶的自發性行為。這是一個嚴重的問題,改吧。
首先,我們是根據一定的規則進行初始化控件的,代碼如下
function AutoPerson(obj, url, hiddenObj) { for (var i = 0; i < obj.length; i++) { AutoInfoPersion($(obj[i]), url, $(hiddenObj[i])); } }
上述代碼並沒有處理控件中的值清空后隱藏控件值存在的問題。如下圖所示,hduty_person中的值,如果不清空,在提交數據的時候,就會獲取對應的值。
接下來,我是這樣處理的
function AutoPerson(obj, url, hiddenObj) { for (var i = 0; i < obj.length; i++) { AutoInfoPersion($(obj[i]), url, $(hiddenObj[i])); $(obj[i]).on("blur", function () { if ($(this).val().trim() == "") { $(hiddenObj[i]).val(""); } }); } }
然后,執行一下看看效果吧,結果並沒有將數據的值清空。那么,調試一下js查看一下原因吧,發現在觸發鼠標離開事件的時候,i的值是3,一臉懵,什么情況啊,怎么會是3,不應該是對應的嗎,突然明白,對於blur事件來說,i就是一個全局變量,全局變量的值,變化所有的地方都會發生變化,所以啊,永遠都不會按照你的想法進行實踐。怎么樣,難過嗎?!
難過就解決吧
現在的問題很清晰,就是如何將變化的全局變量變為固定的傳遞變量,不會隨着變化而發生變化。以下是解決方案:
function AutoPerson(obj, url, hiddenObj) { for (var i = 0; i < obj.length; i++) { AutoInfoPersion($(obj[i]), url, $(hiddenObj[i])); backCheck($(obj[i]), $(hiddenObj[i])); } } //回退事件檢查是否沒有數據,沒有數據則將隱藏選中的控件中的值清空 function backCheck(obj, objHidden) { obj.on("blur", function () { if ($(this).val().trim() == "") { objHidden.val(""); } }); }
本質是將I的作用范圍減小,傳遞到別的函數中,I的作用返回不會傳遞過去,也就在傳遞時,就結束了,所以,以上的方案是可以的,如果你的問題還存在,那么就將范圍繼續提前試一下,應該是OK的了。
最后:願我們的代碼總是符合需求!