我們一般寫js或者jquery的時候 一般都是隨性的 用click 用var申請全域變數 或者局部變數這個是我在工作中像我的一個js很牛逼的一個同事學習到的 在此共用出來 多總結 主要的話 多看我紅色注釋部分//這個是我的一個遮罩層方法 方法定義在我之前部落格裡面var mask=new WindowMask(); //將所有的變數定義在一個函數裡面 或者是一個對象裡面 那麼每次改動的話 只要改這個地方 每次擷取也就擷取這個地方 這個就是我們代碼裡面的封裝 物件導向編程 這樣代碼易於維護//最終返回所以的變數的一個數組function GetParm(obj){ //擷取操作下拉框 var sel=$(obj); //擷取當前td的前一個td var prevtd=sel.parent().prev(); //擷取當前td的下一個td var nexttd=sel.parent().next(); //擷取源環境ID var hidSrcSerialID=prevtd.children(":first").val(); //源環境編號+名稱 var SrcNo_Name=encodeURI($.trim(prevtd.text()).replace(" ","&")); //目標環境ID var hidAimSerialID=prevtd.children(":eq(1)").val(); //目標環境select var enviSelect=nexttd.children(".SelectSrc"); //目標環境顯示內容 var enviShowName=nexttd.children(".ShowName_No"); //操作的值 var selectAction=sel.val(); return { SrcSerialID: hidSrcSerialID, SrcNo_Name:SrcNo_Name, AimSerialID:hidAimSerialID, EnviSelect:enviSelect.is(":visible"), EnviSelectValue:enviSelect.val(), ActionWay:selectAction };} //還有一種方法就是定義一個全域的對象來儲存所有的變數已經相應的方法var ListVar={ isFullScreen:false, //表單是否是全屏 status:[ {text:'失敗',val:0}, {text:'不適用',val:1}, {text:'待執行',val:2}, {text:'執行中',val:3}, {text:'成功',val:4}, {text:'阻塞',val:5} ], optionText:"<option value =\"0\">失敗</option><option value =\"1\">不適用</option><option value =\"2\">待執行</option><option value =\"3\">執行中</option><option value =\"4\">成功</option><option value =\"5\">阻塞</option>", Operate:{ checkRow:"checkRow", status:"status", desc:"desc", ecNumber:"ecNumber", caseNo:"caseNo", doTime:"doTime", annex:"znnex", newEc:"newEc", relationEC:"relationEC", cancelEc:"cancelEc", step:"step", reportLink:"reportLink" }, getOptionText:function(value){ var options=[]; for(var i=0,item;i<this.status.length;i++) { item=this.status[i]; options.push("<option value =\""+item.val+"\" "); if(value==item.text) options.push("selected=\"selected\""); options.push(">"+item.text+"</option>"); } return options.join(''); } }//還有一種方法是定義一個全域變數 儲存所有的變數 但是 卻加一個初始化方法 在需要的時候 初始化就行//dom載入完畢後 調用相應的初始話方法$(function(){ MenuBar.init(); CaseDoList.init(); GTGrid.init(); });var MenuBar={ init:function(){ //調用篩選狀態的初始化方法 this.screenStatus.init(); $("#showCheckMenu").click(MenuBar.checkCondition); this.modifyStatus.init(); .... }, checkCondition:function(){//彈出框過濾條件 ....... }, setFilterText:function(){ ... }, screenStatus:{//篩選狀態 init:function(){ //自訂初始化方法 .... }, show:function(){ //自訂方法 ........ }, hide:function(){ //自訂方法 ........ }, chang:function(){ //自訂方法 ........ } },} //MenuBar //調用第一種方法$(".Change").change(function(){ //調用方法擷取所有的變數 var paramJson=GetParm(this); var nexttd=$(this).parent().next(); var enviShowName=nexttd.children(".ShowName_No"); var enviSelect=nexttd.children(".SelectSrc"); switch($(this).val()){ //選擇了 複製 case "0": //上面定義的遮罩層 mask.show("資料處理中"); enviSelect.hide(); enviShowName.show(); $.post("FrmTestCaseCopyEnviroment.aspx", { SrcNo_Name: paramJson.SrcNo_Name, isAjaxRequest: "1"}, function(data) { enviShowName.html(data.replace("&"," ")); //上面定義的遮罩層 mask.hide(); }); break; //選擇了不 複製 case "1": enviSelect.hide(); enviShowName.hide(); break; //選擇了對應 case "2": enviShowName.hide(); enviSelect.show(); //如果目標環境id不存在 則追加一條 請選擇 if(paramJson.AimSerialID=="-1"||paramJson.AimSerialID==undefined) { mask.show("資料處理中"); enviSelect.html(''); enviSelect.append("<option value='-1' selected='selected'>請選擇</option>"); //從後台載入select www.2cto.com $.post("FrmTestCaseCopyEnviroment.aspx", { isAjaxRequest: "2"}, function(data) { var jsonObj = $.parseJSON(data); for (i=0;i<jsonObj.length;i++) { enviSelect.append("<option value=\"" + jsonObj[i].value + "\" >" + jsonObj[i].text + "</option>") ; } mask.hide(); }); } else{ enviSelect.val(paramJson.AimSerialID); } break; } })