When writing js or jquery, we usually use click to apply for global variables or local variables with var. This is what I learned from a colleague who is like a js in my work. here, I will share multiple summaries. I will read more about my red comments. // This Is My mask layer method definition. In my previous blog, var mask = new WindowMask (); // define all the variables in a function or an object. If you change the variable every time, you only need to modify the variable to obtain the variable. This is the encapsulation of object-oriented programming in our code. code is easy to maintain // an Array function GetParm (obj) of the final returned variable) {// obtain the var sel =$ (obj); // obtain the first td var prevtd = sel of the current td. parent (). prev (); // obtain the next td var nexttd = sel of the current td. parent (). next (); // obtain the source environment ID var hidSrcSerialID = prevtd. children (": first "). val (); // source environment ID + name var SrcNo_Name = encodeURI ($. trim (prevtd. text ()). replace ("", "&"); // target environment ID var hidAimSerialID = prevtd. children (": eq (1 )"). val (); // select var enviSelect = nexttd in the target environment. children (". selectSrc "); // The content displayed in the target environment var enviShowName = nexttd. children (". showName_No "); // operation value var selectAction = sel. val (); return {SrcSerialID: hidSrcSerialID, SrcNo_Name: SrcNo_Name, AimSerialID: hidAimSerialID, EnviSelect: enviSelect. is (": visible"), EnviSelectValue: enviSelect. val (), ActionWay: selectAction};} // another way is to define a global object to store all the variables. The corresponding method var ListVar = {isFullScreen: false, // whether the form is full screen status: [{text: 'failed', val: 0}, {text: 'inapplicable ', val: 1}, {text: 'awaiting execute ', val: 2}, {text: 'execution in progress ', val: 3}, {text: 'success', val: 4}, {text: 'block', val: 5}], optionText: "<option value = \" 0 \ "> failed </option> <option value = \" 1 \ "> not applicable </option> <option value = \" 2 \"> to be executed </option> <option value = \ "3 \"> execution in progress </option> <option value = \ "4 \"> succeeded </option> <option value = \ "5 \"> blocking </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 ('');}} // another method is to define a global variable to store all the variables, but add an initialization method to call the corresponding initial call method after the dom is loaded. $ (function () {MenuBar. init (); CaseDoList. init (); GTGrid. init () ;}); var MenuBar = {init: function () {// call the initialization method of filtering status this. screenStatus. init (); $ ("# showCheckMenu "). click (MenuBar. checkCondition); this. modifyStatus. init ();....}, checkCondition: function () {// filter condition in the pop-up box .......}, setFilterText: function (){...}, screenStatus: {// screening status init: function () {// custom initialization method ....}, show: function () {// custom method ........}, hide: function () {// custom method ........}, chang: function () {// custom method ........}},} // MenuBar // call the first method $ (". change "). change (function () {// call the method to obtain all the variables var paramJson = GetParm (this); var nexttd = $ (this ). parent (). next (); var enviShowName = nexttd. children (". showName_No "); var enviSelect = nexttd. children (". selectSrc "); switch ($ (this ). val () {// copy case "0": // The mask Layer mask defined above. show ("data processing"); enviSelect. hide (); enviShowName. show (); $. post ("FrmTestCaseCopyEnviroment. aspx ", {SrcNo_Name: paramJson. srcNo_Name, isAjaxRequest: "1"}, function (data) {enviShowName.html (data. replace ("&", ""); // mask layer mask defined above. hide () ;}); break; // select not to copy case "1": enviSelect. hide (); enviShowName. hide (); break; // select the corresponding case "2": enviShowName. hide (); enviSelect. show (); // if the target environment id does not exist, append one. Select if (paramJson. aimSerialID = "-1" | paramJson. aimSerialID = undefined) {mask. show ("data processing"); enviSelect.html (''); enviSelect. append ("<option value = '-1' selected = 'selected'> select </option>"); // load 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 ;}})