您的位置：首页 > Web前端 > JavaScript

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

2016-08-23 20:01 363 查看

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

朋友的问题：实现多个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>

总结

1，多角度思考问题，避免思维壁垒

2，多去查看jQuery源码，学习其优秀的构造思想

3，解决问题，首先先做出个解决方案，再去考虑实现功能的最优解决方案

4，给同类元素添加事件，jQuery自带轮寻功能，如果需要原生去些，for循环内部函数自调的方式保护变量i

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js

相关文章推荐

新的分享

章节导航