基于閉包和JSON的省市區(qū)聯(lián)動菜單的實現(xiàn)

王愛華

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

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

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

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

1 運行效果說明

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

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

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

生成頁面元素的代碼如下。

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

請選擇省份

請選擇地市

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

類名為dW的元素是頂層元素，寬400像素，相對定位。

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

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

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

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

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

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

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

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

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

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

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

4.1 點擊選項卡時的功能設(shè)置

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

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

4.2選擇省份

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

獲取點擊的省份名稱保存在變量provT中，替換掉省份選項卡的內(nèi)容。獲取該省份的索引，保存在變量provI中，通過該索引獲取省份下面的地市;完成該操作之后，使用觸發(fā)器方法觸發(fā)地市選項卡的click事件;每次重新選擇省份之后，需要清除之前選擇過的地市和區(qū)鎮(zhèn)信息，恢復(fù)原“請選擇地市”和“請選擇區(qū)鎮(zhèn)”內(nèi)容，清除之前的區(qū)鎮(zhèn)選項卡對應(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ù)是省份點擊事件函數(shù)的閉包，功能如下。

獲取點擊的地市名稱保存在變量cityT中，替換掉地市選項卡的內(nèi)容。獲取當(dāng)前地市的索引，保存在變量cityI中，通過該索引獲取地市下面的區(qū)鎮(zhèn);完成該操作之后，使用觸發(fā)器方法觸發(fā)區(qū)鎮(zhèn)選項卡的click事件。每次重新選擇地市之后，需要重新選擇區(qū)鎮(zhèn)，因此要將之前選擇的區(qū)鎮(zhèn)信息去掉，設(shè)置區(qū)鎮(zhèn)選項卡的文本為“請選擇區(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ù)是地市點擊事件函數(shù)內(nèi)部的閉包，功能如下。

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

5 結(jié)語

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

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