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

最新推荐文章于 2024-03-15 14:19:32 发布

置顶赛文

最新推荐文章于 2024-03-15 14:19:32 发布

阅读量737

点赞数

分类专栏： angular js

本文链接：https://blog.csdn.net/qq_39493777/article/details/78058803

版权

angular js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>