添加删除选项ABCD，

最新推荐文章于 2022-09-22 16:08:57 发布

一个打工仔的笔记

最新推荐文章于 2022-09-22 16:08:57 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Web_Notes/article/details/109515446

版权

js 专栏收录该内容

51 篇文章

订阅专栏

只讲的ABCD的写法

点击+号添加一个选项，-号删除一个选择，abcd排序正确

<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>多次加载</title>
    <style>
        .inputboxs{
            font-size:40px;
        }
        .inputboxs span{
            margin:0 25px;
        }
        .inoutbg span:first-child{
            color:forestgreen;
        }
        .inoutbg span:nth-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <div class="inputboxs">
        <div class="inoutbg0"><span class="zi">A</span><span onclick="addZM(0)">+</span><span onclick="Jian(0)">-</span></div>
    </div>
<script typet="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
    var abindex = 0;
    var str = "A";
    function addZM() {
        abindex++
        var zi = String.fromCharCode(str.charCodeAt() + abindex)//ABCD++
        var h = '';
        h += '<div class="inoutbg' + abindex+'"><span class="zi">' + zi + '</span><span οnclick="addZM(' + abindex + ')">+</span><span οnclick="Jian(' + abindex +')">-</span></div>'
        $(".inputboxs").append(h);
        reloadBH()
    }
    function reloadBH() {
        $(".inputboxs").children("div").each(function (i, e) {
            var zi = String.fromCharCode(str.charCodeAt() + i);
            $(e).find("span.zi").text(zi);
        });
    }
    function Jian(dindex) {
        var len = $(".inputboxs").children("div").length;
        if (len == 1) {
            return;
        }
        $(".inoutbg" + dindex + "").remove();
        reloadBH();
    }
</script>
</body>
</html>