今天帮忙HMF这位ui大神（傻）解决的小问题。

关于原生js添加class名.和jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin-top: 200px;
            overflow: hidden;
        }
        li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            border:1px solid #000;
        }
        .check{
            border:1px solid red;
        }
    </style>
</head>
<body>
<ul id="js">
    <li class="demo1">1</li>
    <li class="demo1">2</li>
    <li class="demo1">3</li>
    <li class="demo1">4</li>
</ul>
<ul id="js1">
    <li class="demo2">h</li>
    <li class="demo2">q</li>
    <li class="demo2">b</li>
    <li class="demo2">v</li>
</ul>

</body>
<script src="jquery-1.12.2.min.js"></script>
<script>
//    原生js方法
//    js添加claa名，删除class名方法
    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }

    function removeClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }
    var li1Ele = document.getElementsByClassName("demo1");
    var li2Ele = document.getElementsByClassName("demo2");
    var change=function (obj) {
        for(var i = 0; i < obj.length; i++){
            obj[i].onclick = function() {
                for(var i = 0; i < obj.length; i++){
                    removeClass(obj[i],"check")
                }
                addClass(this,"check");

            };
        }
    };
    change(li1Ele);
    change(li2Ele);



//    jquery方法
//    var li1ele=$(".demo1");
//    var li2ele=$(".demo2");
//    var changeJ=function (obj) {
//    for(var i = 0; i < obj.length; i++){
//        obj[i].onclick = function() {
//            for(var i = 0; i < obj.length; i++){
//                $(obj).eq(i).removeClass("check")
//            }
//            $(this).addClass("check")
//
//        };
//    }
//};
//changeJ(li1ele);
//changeJ(li2ele);
</script>
</html>

 

posted @ 2016-09-28 15:27  不正经的CodeMonkey  阅读(203)  评论(0)  编辑  收藏  举报