關(guān)于動(dòng)態(tài)創(chuàng)建菜單列表（for循環(huán)中的if）？

小白做了個(gè)動(dòng)態(tài)創(chuàng)建菜單列表的練習(xí)，自己想加一個(gè)判斷，當(dāng)菜單存在的時(shí)候就不要添加，但是這里出現(xiàn)了一個(gè)bug，第一次點(diǎn)擊創(chuàng)建的時(shí)候添加成功，因?yàn)槌晒罅斜眄?xiàng)目長(zhǎng)度變?yōu)?，所以循環(huán)由原來(lái)的1次變成2次，第二次循環(huán)是用輸入的菜單名和創(chuàng)建的菜單名作對(duì)比，所以會(huì)一直alert，但還是可以添加重復(fù)名稱的菜單，在這里請(qǐng)教各位大佬這個(gè)問(wèn)題如何解決。

用for循環(huán)去判斷這個(gè)問(wèn)題我是想到頭爆了也沒(méi)辦法，所以我只能直接獲取整個(gè)個(gè)ul的innerHTML然后用indexOf去判斷是否存在字符串，但是這里又會(huì)有一個(gè)bug，比如添加了一個(gè)“公司簡(jiǎn)介”，那么就不能再添加“公司”這樣的菜單了，因?yàn)椤肮尽笔前凇肮竞?jiǎn)介”里的，醉了啊。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <style type="text/css">
        #nav{
            border:1px solid #012;
            margin:50px auto;
        }
        #menu{
            overflow:hidden;
            width:80%;
            margin:0 auto;
            list-style:none;
        }
        #menu li{
            float:left;
            margin:0 5px;
            
        }
        #menu li a{
            text-decoration: none;
            line-height:30px;
            padding:5px 15px;
            color:#012;
        }
        #menu li a:hover{
            background:#012;
            color:#FFF;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul id="menu">
        <li><a href="#">主頁(yè)</a></li>
    </ul>
</div>
<div>
<h3>動(dòng)態(tài)創(chuàng)建菜單列表功能</h3>
<p></p>
    <lable>菜單名稱：<input id="list-name" type="text" placeholder="輸入菜單名稱" /></lable>
    <lable>菜單鏈接：<input id="list-link" type="text" placeholder="輸入菜單鏈接" /></lable>
    <input type="button" value="添加菜單" onclick="createLists()" />
</div>

<script type="text/javascript">
var menu = document.getElementById("menu");
function createLists(){
    var lists_anchor = menu.getElementsByTagName("a");
    var list_name = document.getElementById("list-name").value;
    var list_link = document.getElementById("list-link").value;

    for(var i = 0; i < lists_anchor.length; i++){
        if(lists_anchor[i].innerHTML == list_name){
            alert("你輸入的菜單名稱已存在，無(wú)需重復(fù)添加。");
        }else{
            var list = document.createElement("li");
            var anchor =document.createElement("a");
            var anchor_text = document.createTextNode(list_name);
        
            anchor.appendChild(anchor_text);
            anchor.setAttribute("href",list_link);
            list.appendChild(anchor);
            menu.appendChild(list);
        }
    }
}
</script>
</body>
</html>

回答

編輯回答

獨(dú)特范

已經(jīng)想到辦法解決了，添加一個(gè)數(shù)組和開(kāi)關(guān)，把獲取到的菜單名存放到數(shù)組，再定義一個(gè)開(kāi)關(guān)（默認(rèn)是開(kāi)的），再將數(shù)組中的每一個(gè)菜單名和輸入的菜單名對(duì)比，如果有相同的菜單名就把開(kāi)關(guān)設(shè)置為關(guān)閉狀態(tài)。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <style type="text/css">
        #nav{
            border:1px solid #012;
            margin:150px auto 30px;
        }
        #menu{
            overflow:hidden;
            width:80%;
            margin:0 auto;
            list-style:none;
        }
        #menu li{
            float:left;
            margin:0 5px;
            
        }
        #menu li a{
            text-decoration: none;
            line-height:30px;
            padding:5px 15px;
            color:#012;
        }
        #menu li a:hover{
            background:#012;
            color:#FFF;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul id="menu">
        <li><a href="#">主頁(yè)</a></li>
    </ul>
</div>
<div>
<h3>動(dòng)態(tài)創(chuàng)建菜單列表功能</h3>
<p></p>
    <lable>菜單名稱：<input id="list-name" type="text" placeholder="輸入菜單名稱" /></lable>
    <lable>菜單鏈接：<input id="list-link" type="text" placeholder="輸入菜單鏈接" /></lable>
    <input type="button" value="添加菜單" onclick="createLists()" />
</div>

<script type="text/javascript">
var menu = document.getElementById("menu");
function createLists(){
    var lists_anchor = menu.getElementsByTagName("a");
    var list_name = document.getElementById("list-name").value;
    var list_link = document.getElementById("list-link").value;
    var arr = [];
    var create_switch = true;

    for(var i = 0; i < lists_anchor.length; i++){
        arr[i] = lists_anchor[i].innerHTML;
    }

    for(var j = 0; j<arr.length; j++){
        if(arr[j] == list_name){
            create_switch = false;
        }
    }

    if(create_switch){
        var list = document.createElement("li");
        var anchor =document.createElement("a");
        var anchor_text = document.createTextNode(list_name);
        
        anchor.appendChild(anchor_text);
        anchor.setAttribute("href",list_link);
        list.appendChild(anchor);
        menu.appendChild(list);
    }else{
        alert("你輸入的菜單名稱已存在，無(wú)需重復(fù)添加。");
    }
}
</script>
</body>
</html>

2017年6月13日 09:25

編輯回答