如何实现移除当前被选中

作者：陈智鸿
撰写时间：2019-01-19
开发工具与关键技术：VS2015、C#、JS
页面截图
鼠标单击时
如何实现移除当前被选中
鼠标双击时
如何实现移除当前被选中
页面代码
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CircularPermutation</title>
    <style>
        ul li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        .sidebar{
            width:260px;
            height:100%;
            float:left;
            overflow:auto;
            background:#fff;
            text-align:center;
        }
        span{
            font-size:18px;
            font-weight:600;
            color:#fff;
            cursor:pointer;
            display:inline-block;
            padding:10px 30px;
            background:#5298dd;
        }
        #YC, #BYC {
            width: 100%;
            text-align: center;
        }

        #YC li, #BYC li {
            text-align: center;
            margin: 10px;
            padding: 10px;
            color: #fff;
            background: #5298dd;
            border-radius: 10px;
            cursor: pointer;
        }

        #YC li:hover, #BYC li:hover {
            background: #197db4;
        }

        #YC li.on, #BYC li.on {
            background: #197db4;
        }
    </style>
</head>
<body>

    <div class="sidebar">
        <ul>
            <li>
                <span>可移除当前被选中</span>
                <ul style="" id="YC">
                    <li>双击我</li>
                    <li>双击我</li>
                    <li>双击我</li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="sidebar">
        <ul>
            <li>
                <span>不可移除当前被选中</span>
                <ul style="" id="BYC">
                    <li>双击我</li>
                    <li>双击我</li>
                    <li>双击我</li>
                </ul>
            </li>
        </ul>

    </div>
    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script>

        //可移除当前被选中点击事件
        $("#YC li").click(function () {
            var Li = $("#YC li");//获取ID为YC里面li的集合
            for (var i = 0; i < Li.length; i++) {//用for循环遍历Li集合里面的li标签
                if (Li[i] == this) {//判断当前li标签是否是被点击的那个
                    var Class = $(Li[i]).hasClass("on");//声明一个变量用来接收当前li标签的Class是否有on，有就返回true，没就返回false
                    if (Class) {//判断当前li标签的Class是否有on
                        $(Li[i]).removeClass("on");//如果当前li标签的Class有on，就移除Class

                    } else {//如果当前li标签的Class没有on

                        for (var j = 0; j < Li.length; j++) {//再用for循环遍历集合里面的li标签
                            $(Li[j]).removeClass("on");//移除Li集合里面的li标签的Class

                            if (Li[j] == this) {//判断当前Li[j]是否是被点击的那个
                                $(Li[i]).addClass("on");//给Li[i]添加Class on
                            }
                        }
                    }
                }
            }
        });

        //不可移除当前被选中点击事件
        $("#BYC li").click(function () {
            var Li = $("#BYC li");//获取ID为BYC里面li的集合
            for (var i = 0; i < Li.length; i++) {//用for循环遍历Li集合里面的li标签
                $(Li[i]).removeClass("on");//移除Li集合里面的li标签的Class on
                if (Li[i] == this) {//判断当前li标签是否是被点击的那个
                    $(Li[i]).addClass("on");//给Li[i]添加Class on
                }
            }
        });


    </script>
</body>
</html>
如何实现移除当前被选中

如何实现移除当前被选中

相关推荐
