php城市列表 字母排序,JavaScript实现按字母排序展示城市列表

概述

最近在做最项目时，需要做一个按字母排序的方式展示城市的功能，为了在以后遇到相同功能的时候能够快速的开发，故将该功能进行了简单的整合；

数据来源

参考资料

思路

在页面初始化时，默认展示热门城市的数据；

初始化页面时，先将数据进行分组，在分组之前要排除热门城市的数据，对剩余的数据进行分组，分组方法是dividArr;

在点击tab切换页签时，将内容添加到对应的容器内；

代码

HTML

• 热门
• ABCD
• EFGH
• JKLM
• NPQR
• STWX
• YZ

CSS

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

font-family: 'Microsoft YaHei';

padding: 0;

margin: 0;

}

ul,

ul li {

list-style: none;

}

.container {

padding: 15px;

box-sizing: border-box;

}

.city-picker {

width: 100%;

min-height: 72px;

}

.tab {

display: flex;

height: 42px;

margin: 0;

padding: 0;

}

.tab li {

flex: 1;

position: relative;

height: 42px;

line-height: 42px;

text-align: center;

cursor: pointer;

}

.tab li span {

display: block;

width: 100%;

height: 100%;

color: #333;

}

.tab li.active {

background: orangered;

color: #fff;

}

.tab li.active span {

color: #fff;

}

.tab-content {

width: 100%;

margin-top: 10px;

box-sizing: border-box;

}

.tab-content .content {

display: none;

float: left;

width: 100%;

height: 100%;

min-height: 20px;

border: 1px solid orangered;

border-radius: 3px;

-webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);

-moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);

-ms-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);

-o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);

transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);

}

.tab-content .content.active {

display: block;

}

.tab-content .content dl {

display: block;

padding: 5px;

margin: 5px;

color: olivedrab;

font-size: 14px;

cursor: pointer;

}

.tab-content .content dl dt {

display: block;

width: 100%;

line-height: 2;

color: orangered;

padding-left: 10px;

}

.tab-content .content dl dd {

display: inline-block;

padding: 0 5px;

margin: 5px;

color: #333;

font-size: 14px;

}

.tab-content .content dl dd:hover {

background: orangered;

color: #fff;

}

JS

window.onload = function() {

var oTab = getId("tab");

var aItem = getEle("li", oTab);

var oContainer = getId("tabContent");

var aContent = getByCls("content", oContainer);

var arr = list.slice();

arr.shift();

var data = dividArr(arr, 4);

tab(aItem, aContent, data);

loadHotCity(aContent[0]);

};

/**

* 根据id获取DOM元素

* @param {String} id DOM元素的id

* @return {Object} DOM对象

*/

function getId(id) {

return document.getElementById(id)

}

/**

* 通过tagName获取元素

*

* @param {String} tagName 标签名

* @param {Object} parent 父级元素

* @return {Array} 根据标签名得到的元素集合

*/

function getEle(tagName, parent) {

return parent.getElementsByTagName(tagName);

}

/**

* 通过tagName获取元素

*

* @param {String} cls 样式名

* @param {Object} parent 父级元素

* @return {Array} 根据样式名得到的元素集合

*/

function getByCls(cls, parent) {

return parent.getElementsByClassName(cls);

}

/**

* tab选项卡效果

*

* @param {Array} aItem tab页签li的集合

* @param {Array} aContent tab content

* @param {Array} group 分组后的数组

*/

function tab(aItem, aContent, group) {

for (let i = 0; i < aItem.length; i++) {

aItem[i].index = i;

aItem[i].onclick = function() {

var that = this;

clearCls(aItem, aContent);

this.className = "item active";

aContent[this.index].className = "content active";

switchCity(that, i, group);

};

}

}

/**

* 点击tab页签加载相应的城市数据

*

* @param {Object} target 当前点击的tab页签

* @param {Number} index 当前点击页签的索引

* @param {Array} group 分组后的数组

*/

function switchCity(target, index, group) {

var oContainer = getId("tabContent");

var aContent = getByCls("content", oContainer);

if (index == 0) {

aContent[0].innerHTML = '';

loadHotCity(aContent[0]);

} else {

aContent[index].innerHTML = '';

group[index - 1].forEach(function(item, a) {

var dl = document.createElement('dl')

var dt = document.createElement('dt');

dt.innerHTML = item.name;

dl.appendChild(dt);

item.citys.forEach(function(i, b) {

var dd = document.createElement('dd');

dd.innerHTML = i;

dd.setAttribute('data-index', b)

dl.appendChild(dd)

});

aContent[index].appendChild(dl);

});

}

}

/**

* 将一个数组分为n份

* @param {Array} arr 需要进行分组的数组

* @param {Number} n 每组元素个数

* @return {Array} 分组后的新数组

*/

function dividArr(arr, n) {

var x = 0,

y = x + n;

var result = [],

len = arr.length;

if (y >= len) {

return result.push(arr)

}

while (y < len) {

result.push(arr.slice(x, y));

x = x + n;

y = x + n;

if (y > len) {

y = len;

result.push(arr.slice(x, y));

break;

}

}

return result;

}

/**

* 清除tab页签的高亮显示效果

*

* @param {Array} aItem Item tab页签li的集合

* @param {Array} aContent tab content

*/

function clearCls(aItem, aContent) {

for (let i = 0; i < aItem.length; i++) {

aItem[i].className = "item";

aContent[i].className = "content";

}

}

/**

* 初始化加载热门城市

*

* @param {Object} hotCity 热门城市

*/

function loadHotCity(hotCity) {

var hotCitys = list[0];

hotCity.innerHTML = '';

var dl = document.createElement("dl");

hotCity.appendChild(dl)

var dt = document.createElement('dt')

dt.innerHTML = list[0].name;

dl.appendChild(dt);

hotCitys.citys.forEach(function(item, index) {

var oText = document.createElement('dd');

oText.innerHTML = item;

oText.setAttribute('data-index', index)

dl.appendChild(oText);

});

}

结果展示

结果.png