浅谈工作中如何规避思维定式

最新推荐文章于 2018-05-26 14:13:00 发布

袁森Simon

最新推荐文章于 2018-05-26 14:13:00 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/simonyuan100/article/details/52293966

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有朋友工作中遇到一些问题，让帮忙处理下，分析后，发现其实并不是技术问题，而是思考问题的方式产生了思维定式，下面事例浅谈如何规避：

朋友的问题：实现多个div 绑定点击事件事件为被点击div增加指定class,同时其余div移除此class，前提是不允许使用jQuery。
当然，jQuery操作起来非常简单，addClass/removeClass 秒秒钟的事情，具体为什么不让用jQuery也无需考究，遇到这种问题，明白jQuery原理的都知道原生JS肯定可以解决的，jQuery集成了很多的函数成库，就是为了方便对DOM的操作，在上述情况下，其实可以转换思路，自己去模仿jQuery的某些方法，来有效的完成原生JS方案，以下具体代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>click div, with adding active class and removing siblings active class</title>
    <style>
        div{
            width:100%;
            height:100px;
            background:#eee;
            border:1px solid #ff0;
        }
        .active{
            background:#f00;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>

        var div=document.getElementsByTagName("div");
        for(var i= 0;i<div.length;i++){
            (function(i){div[i].onclick=function(){
                removeAllClass(div,'active');
                addClass(div[i],'active');
            }})(i)
        }
        function removeAllClass(obj,cls){
            for(var i= 0;i<obj.length;i++){
                removeClass(div[i],cls)
            }
        }
        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, ' ');
            }
        }

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