js制作简单的课程表,不重复添加

最新推荐文章于 2024-11-19 14:51:02 发布

原创最新推荐文章于 2024-11-19 14:51:02 发布 · 7.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一个使用HTML和JavaScript实现的课程选择器应用。该应用允许用户通过点击不同的按钮来选择并显示所选课程的标签。每个课程按钮对应一门学科，如语文、数学等。当用户点击某个课程按钮时，该课程将以li元素的形式添加到页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 400px;
            border:1px solid #999;
        }
        ul li{
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #999;
            margin: 10px;
            float: left;
        }
        span{
            padding-left: 6px;
        }
    </style>
</head>
<body>
    <ul>

    </ul>
    <div>
        <button data-type="yw">语文</button>
        <button data-type="sx">数学</button>
        <button data-type="yy">英语</button>
        <button data-type="zz">政治</button>
        <button data-type="ls">历史</button>
        <button data-type="dl">地理</button>
        <button data-type="ty">体育</button>
    </div>
    <script>
        window.onload=function(){
            /*找到要操作的标签*/
            var ul=document.getElementsByTagName("ul")[0];
            var btns=document.getElementsByTagName("button");
            /*遍历所有课程按钮*/
            for(var i=0;i<btns.length;i++){
                /*当前点击按钮*/
                btns[i].onclick=function(){
                    /*开关*/
                    var hasLi=false;
                    /*创建li标签*/
                    var nli=document.createElement("li");
                    /*赋值*/
                    nli.innerHTML=this.innerHTML+"<span>✖</span>";
                    /*当前点击按钮的type值*/
                    var type=this.getAttribute("data-type");
                    console.log(type);
                    /*给li设置data-type值*/
                    nli.setAttribute("data-type",type);
                    /*找到所有li*/
                    var ali=ul.getElementsByTagName("li");
                    /*遍历li*/
                    for(var i=0;i<ali.length;i++){
                        if(ali[i].getAttribute("data-type")==this.getAttribute("data-type")){
                            hasLi=true;
                            break;
                        }else{
                            hasLi=false;
                        }
                    }
                    if(hasLi==false){
                        ul.append(nli);
                        var span=nli.getElementsByTagName("span")[0];
                            span.onclick=function(){
                            ul.removeChild(this.parentNode);
                        }
                    }

                }
            }
        }
    </script>
</body>
</html>