王愛(ài)華

摘 要：利用網(wǎng)頁(yè)中嵌套的div元素結(jié)合樣式的相對(duì)定位和絕對(duì)定位技術(shù)，通過(guò)訪問(wèn)JSON數(shù)據(jù)以及應(yīng)用腳本中閉包的特點(diǎn)，制作一款簡(jiǎn)單實(shí)用的省市區(qū)聯(lián)動(dòng)菜單。

關(guān)鍵詞：定位;JSON數(shù)據(jù);閉包;省市區(qū)聯(lián)動(dòng)

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-2064（2020）12-0057-02

省市區(qū)聯(lián)動(dòng)在很多購(gòu)物網(wǎng)站中使用，用戶(hù)填寫(xiě)收件地址時(shí)，通過(guò)省市區(qū)聯(lián)動(dòng)功能選擇省份、地市和區(qū)鎮(zhèn)，用起來(lái)非常方便。本文將使用網(wǎng)站開(kāi)發(fā)中的定位技術(shù)、腳本中的閉包技術(shù)，結(jié)合訪問(wèn)JSON數(shù)據(jù)來(lái)實(shí)現(xiàn)一款美觀方便的省市區(qū)聯(lián)動(dòng)菜單。

1 運(yùn)行效果說(shuō)明

頁(yè)面初始運(yùn)行時(shí)，只顯示圖1①的內(nèi)容，鼠標(biāo)指向此處時(shí)，顯示圖1②的部分，此時(shí)若是直接點(diǎn)擊請(qǐng)選擇地市或者請(qǐng)選擇區(qū)鎮(zhèn)，打開(kāi)的內(nèi)容區(qū)都為空，若是點(diǎn)擊請(qǐng)選擇省份，則顯示圖1下方所有省份以供用戶(hù)選擇。

若從所示省份中選擇山東省，修改選項(xiàng)卡名稱(chēng)為山東省之后，直接跳轉(zhuǎn)到請(qǐng)選擇地市區(qū)域，顯示山東省所有地市，若選擇濟(jì)南市，則修改選項(xiàng)卡名稱(chēng)后，直接跳轉(zhuǎn)到請(qǐng)選擇區(qū)鎮(zhèn)區(qū)域，顯示濟(jì)南市所有區(qū)鎮(zhèn)，若選擇歷下區(qū)，則將選項(xiàng)卡名稱(chēng)改為歷下區(qū)，至此，一輪選擇完畢，圖1①內(nèi)容變成“山東省/濟(jì)南市/歷下區(qū)”，鼠標(biāo)離開(kāi)之后，將收起下面所有的信息，只顯示選擇的結(jié)果。

2 頁(yè)面元素的結(jié)構(gòu)和樣式要求

生成頁(yè)面元素的代碼如下。

請(qǐng)選擇省份、地市和區(qū)鎮(zhèn)

請(qǐng)選擇省份

請(qǐng)選擇地市

請(qǐng)選擇區(qū)鎮(zhèn)

類(lèi)名為dW的元素是頂層元素，寬400像素，相對(duì)定位。

Id為tabW的元素，設(shè)置圖1①所示界面，高20像素，填充5像素，邊框1像素灰色，絕對(duì)定位，z軸取值為2，表示將其置于divW元素的前方，縱橫坐標(biāo)為0，該div占據(jù)縱坐標(biāo)空間為0到31像素。

Id為divW的元素，寬380像素，最小高度60像素，設(shè)置選項(xiàng)卡區(qū)，顯示相應(yīng)的省份、地市或者區(qū)鎮(zhèn)，高度需要跟隨變化;下填充0，其余填充10像素，邊框1像素灰色，白色背景用于遮擋后面內(nèi)容，絕對(duì)定位，z軸為1，縱坐標(biāo)31像素，初始狀態(tài)隱藏。

當(dāng)鼠標(biāo)指向divW時(shí)，使用：hover和子元素選擇符設(shè)置tabW的下邊框?yàn)榘咨O(shè)置divW顯示，通過(guò)tabW的白色下邊框覆蓋divW上邊框中相應(yīng)部分，達(dá)到圖1①和②上下一體的效果。

選項(xiàng)卡區(qū)使用類(lèi)名divT定義，寬380像素，高34像素，絕對(duì)定位，z軸為2。每個(gè)選項(xiàng)卡使用類(lèi)名tab定義，高20像素，填充5像素，右邊距5像素，邊框2像素灰色，下邊框2像素暗紅色，向左浮動(dòng)，字號(hào)10pt，文本行高20像素。選中的選項(xiàng)卡使用類(lèi)名tabS定義，邊框2像素，顏色暗紅，下邊框2像素白色，做到選項(xiàng)卡和下面內(nèi)容區(qū)連為一個(gè)整體。

每個(gè)內(nèi)容區(qū)使用類(lèi)名cont定義，寬380像素，上填充10像素，邊距auto，上邊框2像素暗紅色，絕對(duì)定位，z軸為1，縱坐標(biāo)42像素，這是因?yàn)楹凶觗ivW有10像素上填充，每個(gè)選項(xiàng)卡元素總高度為34像素，所以選項(xiàng)卡在divW中占據(jù)的縱坐標(biāo)范圍為10到43像素，內(nèi)容區(qū)的2像素上邊框需要與選項(xiàng)卡的下邊框重合，重合的兩個(gè)像素為42像素和43像素，所以?xún)?nèi)容區(qū)的縱坐標(biāo)需要設(shè)置為42像素。

省份、地市和區(qū)鎮(zhèn)三個(gè)內(nèi)容區(qū)除了使用類(lèi)名cont之外，分別應(yīng)用了prov、city和area類(lèi)名。內(nèi)容區(qū)中顯示的所有省份、地市或者區(qū)鎮(zhèn)名稱(chēng)，都使用span元素定界，通過(guò)浮動(dòng)將span設(shè)置為橫向排列的塊元素，寬95像素，高30像素，字號(hào)10pt，藍(lán)色文本，鼠標(biāo)手狀。

3 JSON數(shù)據(jù)的定義和訪問(wèn)

省市區(qū)聯(lián)動(dòng)功能中，使用的省市區(qū)名稱(chēng)非常多，需要定義JSON數(shù)據(jù)。為了能夠讓讀者理解數(shù)據(jù)的結(jié)構(gòu)和定義方式，使用圖2展示了北京市的數(shù)據(jù)。

數(shù)組中每一個(gè)元素都是一個(gè)對(duì)象，對(duì)象擁有name和city兩個(gè)屬性，name取值為省份名稱(chēng)，city取值又是一個(gè)數(shù)組，數(shù)組中每個(gè)元素都是一個(gè)對(duì)象，對(duì)象擁有name和area兩個(gè)屬性，name取值為地市名稱(chēng)，area取值是一個(gè)一維數(shù)組，數(shù)組元素內(nèi)容是當(dāng)前地市下面所有區(qū)鎮(zhèn)名稱(chēng)。對(duì)于直轄市來(lái)說(shuō)，city數(shù)組只有一個(gè)對(duì)象元素，對(duì)于省份來(lái)說(shuō)，city數(shù)組中對(duì)象元素的個(gè)數(shù)取決于地市的個(gè)數(shù)。使用$.getJSON（）方法讀取JSON數(shù)據(jù)之后保存在全局變量city中，方便下面操作。

4 使用閉包實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能

首先對(duì)數(shù)組city進(jìn)行遍歷，將所有省份名稱(chēng)使用span標(biāo)記定界之后連接在一起，保存在變量contP中，為接下來(lái)顯示省份做好準(zhǔn)備。

4.1 點(diǎn)擊選項(xiàng)卡時(shí)的功能設(shè)置

定義選擇省份、地市和區(qū)鎮(zhèn)三個(gè)選項(xiàng)卡的點(diǎn)擊事件處理函數(shù)$（“.tab”）.click（function（）{…}），該函數(shù)是頂層函數(shù)，功能如下。

使用jQuery的移除類(lèi)名方法去掉所有選項(xiàng)卡中引用的tabS類(lèi)名，恢復(fù)其初始狀態(tài)，同時(shí)隱藏所有內(nèi)容區(qū);之后為當(dāng)前選項(xiàng)卡添加類(lèi)名tabS，將其設(shè)置為選中狀態(tài)，獲取該選項(xiàng)卡索引，根據(jù)索引設(shè)置相應(yīng)內(nèi)容區(qū)為顯示狀態(tài);為保證divW的高度能夠跟隨不同內(nèi)容區(qū)內(nèi)容多少變化，需要判斷選項(xiàng)卡的索引，若是0，表示點(diǎn)擊的是請(qǐng)選擇省份選項(xiàng)卡，將變量contP的內(nèi)容設(shè)置為內(nèi)容區(qū)prov的內(nèi)容，獲取該內(nèi)容區(qū)的高度，增加60像素之后，重新設(shè)置為divW的高度;若當(dāng)前選項(xiàng)卡索引是1或者2，也就是點(diǎn)擊的是請(qǐng)選擇地市或請(qǐng)選擇區(qū)鎮(zhèn)時(shí)，分別獲取city和area內(nèi)容區(qū)的高度，增加60像素之后設(shè)置為divW的高度。

4.2選擇省份

定義省份的事件處理函數(shù)$（“.prov>span”）.click（function（）{…}），該函數(shù)是選項(xiàng)卡點(diǎn)擊事件函數(shù)的閉包，功能如下。

獲取點(diǎn)擊的省份名稱(chēng)保存在變量provT中，替換掉省份選項(xiàng)卡的內(nèi)容。獲取該省份的索引，保存在變量provI中，通過(guò)該索引獲取省份下面的地市;完成該操作之后，使用觸發(fā)器方法觸發(fā)地市選項(xiàng)卡的click事件;每次重新選擇省份之后，需要清除之前選擇過(guò)的地市和區(qū)鎮(zhèn)信息，恢復(fù)原“請(qǐng)選擇地市”和“請(qǐng)選擇區(qū)鎮(zhèn)”內(nèi)容，清除之前的區(qū)鎮(zhèn)選項(xiàng)卡對(duì)應(yīng)的內(nèi)容區(qū)的內(nèi)容;遍歷當(dāng)前選中省份的所有地市，以span元素連接在一起放在變量contC中，將contC內(nèi)容作為內(nèi)容區(qū)city的內(nèi)容，獲取內(nèi)容區(qū)city的高度，增加60像素之后，設(shè)置為divW的高度。

4.3 選擇地市

定義地市的事件處理函數(shù)$（“.city>span”）.click（function（）{…}），該函數(shù)是省份點(diǎn)擊事件函數(shù)的閉包，功能如下。

獲取點(diǎn)擊的地市名稱(chēng)保存在變量cityT中，替換掉地市選項(xiàng)卡的內(nèi)容。獲取當(dāng)前地市的索引，保存在變量cityI中，通過(guò)該索引獲取地市下面的區(qū)鎮(zhèn);完成該操作之后，使用觸發(fā)器方法觸發(fā)區(qū)鎮(zhèn)選項(xiàng)卡的click事件。每次重新選擇地市之后，需要重新選擇區(qū)鎮(zhèn)，因此要將之前選擇的區(qū)鎮(zhèn)信息去掉，設(shè)置區(qū)鎮(zhèn)選項(xiàng)卡的文本為“請(qǐng)選擇區(qū)鎮(zhèn)”;遍歷將當(dāng)前選中地市的所有區(qū)鎮(zhèn)，以span元素內(nèi)容形式連接在一起放在變量contA中，將contA內(nèi)容作為內(nèi)容區(qū)area的內(nèi)容，獲取內(nèi)容區(qū)area的高度，增加60像素之后，設(shè)置為divW的高度。

4.4選擇區(qū)鎮(zhèn)

定義區(qū)鎮(zhèn)的事件處理函數(shù)$（“.area>span”）.click（function（）{…}），該函數(shù)是地市點(diǎn)擊事件函數(shù)內(nèi)部的閉包，功能如下。

獲取點(diǎn)擊的區(qū)鎮(zhèn)名稱(chēng)保存在變量areaT中，替換掉區(qū)鎮(zhèn)選項(xiàng)卡的內(nèi)容;設(shè)置變量selT的取值為選擇的結(jié)果，例如“山東省/濟(jì)南市/歷下區(qū)”，作為選項(xiàng)卡“請(qǐng)選擇省份、地市和區(qū)鎮(zhèn)”的內(nèi)容。

5 結(jié)語(yǔ)

本文根據(jù)閉包的功能特點(diǎn)，使用四層嵌套函數(shù)完成省市區(qū)聯(lián)動(dòng)菜單，先點(diǎn)擊省份選項(xiàng)卡，在顯示的省份信息中點(diǎn)擊所屬的省份名稱(chēng)，點(diǎn)擊省份下面的地市名稱(chēng)，點(diǎn)擊地市下面的區(qū)鎮(zhèn)名稱(chēng)，每一層函數(shù)的功能必須基于上一層函數(shù)的結(jié)果。選擇了一次省份之后，可以反復(fù)重新選擇該省份下面的地市和地市下面的區(qū)鎮(zhèn)，通過(guò)閉包有效保留了父函數(shù)中局部變量的取值。

使用該方案實(shí)現(xiàn)的省市區(qū)聯(lián)動(dòng)菜單，可以嵌入在頁(yè)面中任意一個(gè)位置，結(jié)構(gòu)清晰，應(yīng)用方便。