angularjs 添加课程表+移除+不可重复添加

来源:互联网 发布:武之舞纪录片全集知乎 编辑:程序博客网 时间:2024/06/05 11:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标题</title>    <style>        *{            margin:0;            padding:0;        }        li{            list-style: none;            float: left;            margin:0 20px;        }        ul{            width: 200px;            height: 300px;            border: 1px solid black;        }    </style>    <script src="jQuery/jquery-3.2.1.min.js"></script></head><body>    <ul>    </ul>    <button>体育</button>    <button>英语</button>    <button>数学</button>    <button>美术</button>    <button>语文</button><script>    $(function () {        var alreadySubject = [];        $("button").click(function () {            var flag = false;            //alert($(this).text());            for (var i = 0 ; i<alreadySubject.length; i++){                if (alreadySubject[i] == $(this).text()){                    flag = true;                }            }            if (flag == true){                alert("已经存在");            }else{                alreadySubject.push($(this).text());                var li = "<li>"+$(this).text()+"<span>X</span></li>";                $("ul").append(li);            }        });        $("ul").on("click","span",function () {            var li = $(this).parent("li").text();            var temp = li.substring(0,2);            for (var i = 0 ; i < alreadySubject.length; i++){                if (alreadySubject[i] == temp){                    alreadySubject.splice(i,1);                    $(this).parent("li").hide();                }            }        })    });</script></body></html>