<div id="changeColor">
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com">新浪网</a>
<a href="http://www.baidu.com">搜狗网</a>这是html代码
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com">新浪网</a>
<a href="http://www.baidu.com">搜狗网</a>这是html代码
var changeColor = document.getElementById("changeColor");
var changes = changeColor.getElementsByTagName("a");
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
change.onclick = (function(change){
return function () {
var changeColor = document.getElementById("changeColor");
var changes = changeColor.getElementsByTagName("a");
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
if (this == change) {
change.style.background = "red";
}
else {
change.style.background = "white";
}
}
return false;
}}(change));
}
}
var changeColor = document.getElementById("changeColor");
var changes = changeColor.getElementsByTagName("a");
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
change.onclick = function () {
var changeColor = document.getElementById("changeColor");
var changes = changeColor.getElementsByTagName("a");
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
//我们在这里加入一个alert形成一个阻塞,使得每一步的变化都能呈现出来
alert('观察点击对象的背景颜色变化');
/*
先理解下面条件中的this和change分别代表什么
1:this --> 外层定义的change.onclick中的change,即当前[点击对象]
2:change -->上面定义的var change = changes[i]中的change,即[比对对象]
*/
if (this == change) { //判断当前的[比对对象]与[点击对象]是否一致
this.style.background = "red"; //如果一致:那使用this或change是没有分别的,所以这里用this没有问题
} else {
/*
这里的前提时,change对象与this并不一致
如果下面还使用this,则表示你在改变当前[点击对象]的背景颜色
就拿你点击第一个为例吧,比对流程就变成了
点击对象为:百度网
比对的对象分别为:百度网,新浪网,搜狗网
条件成立时,执行上面的语句:[点击对象]背景颜色变为红色
点击对象[百度网]==比对对象[百度网]
条件不成立时,执行下面的语句:[点击对象]背景颜色变为白色
点击对象[百度网]!=比对对象[新浪网]
点击对象[百度网]!=比对对象[搜狗网]
从上面就可以看出,对[点击对象]的操作将受后一个[比对对象]的影响
综上:除非当前[点击对象]是[比对对象]集合中的最后一个元素,否则它的背景颜色将永远是白色
如果将下面的this改为change[比对对象],则一切就正常了
条件不成立时,执行下面的语句:[比对对象]背景颜色变为白色
点击对象[百度网]!=比对对象[新浪网]
点击对象[百度网]!=比对对象[搜狗网]
*/
this.style.background = "white";//错误
//change.style.background = "white";//正确
}
}
return false;
}
}
}
<div id="changeColor">
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.sina.com.cn">新浪网</a>
<a href="http://www.sogou.com">搜狗网</a>
</div>
<script type="text/javascript">
/*
先创建一个自执行的匿名函数
流程为:
1:初次执行此函数时,其内部的this-->window,因为this!==window条件不成立,所以,将对每个a标签定义onclick事件
2:当每个a标签被分别点击时,再执行此函数,因为其内部的this-->被点击的对象,因为this!==window条件成立,此时将设置对应的背景颜色
*/
(function(){
var _href = document.getElementById("changeColor").getElementsByTagName("a"),//获取div[id='changeColor']下a标签集合
_self = arguments.callee,//获取匿名函数本身
i = 0,
j = _href.length;
for (;i<j;i++) {
/*
初始化执行时:this-->window
当点击对象时,onclick事件触发:this-->点击对象[下面有说明]
所以,可以通过判断this的值来确定到底是要初始化事件,还是执行事件内容
*/
if(this !== window){
//这里的this-->被点击的对象,所以根据this===_href[i]的判断结果对_href[i]标签的背景颜色进行相对应的设置
_href[i].style.background = this===_href[i] ? "red" : "white";
}else{
//这里的this-->window
_href[i].onclick = function () {
/*
这里的 this-->_href[i][被点击对象]
使用call方法将函数内部的this指向_href[i]
所以,当点击对象时,再执行匿名函数,this-->_href[i]
*/
_self.call(this);
return !1;
}
}
};
})();
</script>