利用枚举算法实现todoList:把对应项添加的内容列表

功能:

  • 点击城市列表项,如果内容列表不存在,则插入点击项;
  • 如果内容列表中已存在,则不插入,然后把内容列表中的对应项放到第一位。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>枚举算法实现list列表</title>
    <style>
        .tag-list a{ text-decoration: none; display: inline-block; margin: 0 10px; }
        .con-show{ padding: 20px 10px; background-color: #f0f0f0; margin-top: 20px; }
        .con-show p{ margin: 10px; }
    </style>
</head>
<body>
    <div class="tag-list">
        <h3>城市列表:</h3>
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">南京</a>
        <a href="javascript:;">深圳</a>
        <a href="javascript:;">广州</a>
        <a href="javascript:;">天津</a>
    </div>
    <div class="con-list"></div>
</body>
</html>

JS代码:

var oList = document.querySelector('.tag-list'),
    aItems = oList.getElementsByTagName('a'),
    oConList = document.querySelector('.con-list');

for(var i = 0; i < aItems.length; i++){
    aItems[i].onclick = function() {
        var ownText = this.innerHTML;
        var oP = document.createElement('p');
        // 如果内容列表中已经存在要插入的对象
        if(checkRepeat(ownText)) {
            console.log('内容已经存在喽...');
            // 把内容列表中已存在的内容项前置
            toBefore(ownText);
        }else {
            // 如果不存在,则插入
            oP.innerHTML = ownText;
            oConList.insertBefore(oP, oConList.querySelectorAll('p')[0]);
        }
    }
}
// 枚举内容类别中的内容,检测是否和要插入的相同,如果有相同项,返回true
function checkRepeat(text) {
    oConItem = oConList.querySelectorAll('p');
    for(var i = 0; i < oConItem.length; i++){
        if(oConItem[i].innerHTML == text){
            return true;
        }
    }
}
// 如果内容列表中已经存在将要插入的对象,则把内容列表中对应内容前置
function toBefore(text) {
    oConItem = oConList.querySelectorAll('p');
    for(var i = 0; i < oConItem.length; i++){
        if(oConItem[i].innerHTML == text){
            oConList.insertBefore(oConItem[i], oConItem[0]);
        }
    }
}

 

原文地址:https://www.cnblogs.com/lvmylife/p/5918950.html