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

概述

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

数据来源

demo数据来源于：https://github.com/visugar/FrontEnd-examples/blob/master/01%E7%9C%81%E5%B8%82%E5%8C%BA%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/city02.js

参考资料

https://blog.csdn.net/majormayer/article/details/51132338

思路

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

初始化页面时，先将数据进行分组，在分组之前要排除热门城市的数据，对剩余的数据进行分组，分组方法是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