for循环绑定事件问题
2012-06-10 22:49
579 查看
for循环绑定事件。忽略中间过程中的绑定事件，解决办法是将中间过程中的绑定写成函数，通过循环传参完成绑定。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#seoblock *{ padding:0; margin:0 }
#seoblock{border:1px solid #c5e0f0;padding:2px 0 0 2px; width:178px;}
#seoblock h2{ background:url(img/bg1.png) 0 0 no-repeat;width:164px;height:26px; line-height:30px; font-size:14px;font-weight:700; color:#336699;padding-left:17px; overflow:hidden;margin-bottom:5px;}
#seoblock h2 span{ padding-right:10px;}
#seoblock h2 .more{ color:#333; font:12px/33px 宋体,arial,serif;}
#seoblock ul{clear:both;font-size:12px;}
#seoblock ul li{ list-style:none;}
#seoblock ul li a{display:inline-block;color:#606060;margin-right:25px; text-decoration:none;}
#seoblock ul.t{ margin:0 0 5px 0;height:21px; border-bottom:-1px;float:left;}
#seoblock ul.t li{float:left;}
#seoblock ul.t li a{background:url(img/bg1.png) 0 -26px no-repeat; height:21px;width:55px; line-height:21px; color:#606060;margin-right:4px; text-decoration:none;text-align:center;}
#seoblock ul.t li a.mr0{margin-right:0px;}
#seoblock ul.t li.show{display:block;}
#seoblock ul.t li.show a{position: relative; bottom: -1px;height:25px;background:#fff;border:1px solid #C5E0F0; border-bottom:none;width:53px; }
#seoblock ul.content{width:174px;}
#seoblock ul.content li{display:none;}
#seoblock ul.content li.show{display:block; border:1px solid #C5E0F0; overflow: hidden;margin-bottom:5px;}
#seoblock ul.content li p{line-height:24px; padding-left:5px;}
#seoblock ul.content li p a{white-space:nowrap; margin: 0 8px;}
</style>
</head>
<body>
<div id="seoblock">
<h2><span>家居就商城</span><span>品牌网店</span></h2>
<!--第一行开始-->
<ul class="t">
<li class="show"><a href="###">家1</a></li>
<li><a href="###">家2</a></li>
<li><a href="###">家3</a></li>
</ul>
<ul class="content">
<li class="show"><p><a href="#">家1</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家2</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家3</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第一行结束-->
<!--第二行开始-->
<ul class="t">
<li><a href="###">家11</a></li>
<li><a href="###">家22</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第二行结束-->
<!--第三行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第三行结束-->
<!--第四行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第四行结束-->
</div>
<script>
var seoObj = document.getElementsByTagName("ul");
var tLi = [],
contentLi = [],
indexOld = 0;
//获取所有className是t的ul
for(var i = 0; i< seoObj.length; i++){
if(seoObj[i].className == "t"){
fnPush(seoObj[i],tLi);
}
if(seoObj[i].className == "content"){
fnPush(seoObj[i],contentLi);
}
}
for (var i=0; i<tLi.length; i++){
var that = tLi[i];
addEvent( that );
}
function addEvent(that){
// alert(indexOfArray(that,tLi));
if (window.attachEvent){
that.attachEvent('onmouseover',function(){
changeClass.call(that);
});
} else {
that.addEventListener('mouseover',function(){
changeClass.call(that)
},false);
}
}
//获取标题dom和内容dom
function fnPush(seoObj,tORcontent){
var seoObjs = seoObj.childNodes,
len = seoObjs.length;
for (var j = 0; j < len; j++ )
{
if (seoObjs[j].nodeName == "LI")
{
tORcontent.push(seoObjs[j]);
}
}
}
function changeClass() {
//alert(this.tagName);
if (hasClass(this,"show") == null){
removeClass(tLi[indexOld],"show");
addClass(this,"show");
//alert(indexOfArray(that,tLi));
removeClass(contentLi[indexOld],"show");
addClass(contentLi[indexOfArray(this,tLi)],"show");
}
indexOld = indexOfArray(this,tLi);
}
//添加删除样式
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
if (element.className == undefined){
return null;
} else {
return element.className.match(reg);
}
}
function addClass(element, className) {
if (!this.hasClass(element, className))
{
element.className = className;
}
}
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,'');
}
}
function indexOfArray(elem,array){
for (var z = 0; z<array.length; z++ )
{
if(elem == array[z]){
return z;
}
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#seoblock *{ padding:0; margin:0 }
#seoblock{border:1px solid #c5e0f0;padding:2px 0 0 2px; width:178px;}
#seoblock h2{ background:url(img/bg1.png) 0 0 no-repeat;width:164px;height:26px; line-height:30px; font-size:14px;font-weight:700; color:#336699;padding-left:17px; overflow:hidden;margin-bottom:5px;}
#seoblock h2 span{ padding-right:10px;}
#seoblock h2 .more{ color:#333; font:12px/33px 宋体,arial,serif;}
#seoblock ul{clear:both;font-size:12px;}
#seoblock ul li{ list-style:none;}
#seoblock ul li a{display:inline-block;color:#606060;margin-right:25px; text-decoration:none;}
#seoblock ul.t{ margin:0 0 5px 0;height:21px; border-bottom:-1px;float:left;}
#seoblock ul.t li{float:left;}
#seoblock ul.t li a{background:url(img/bg1.png) 0 -26px no-repeat; height:21px;width:55px; line-height:21px; color:#606060;margin-right:4px; text-decoration:none;text-align:center;}
#seoblock ul.t li a.mr0{margin-right:0px;}
#seoblock ul.t li.show{display:block;}
#seoblock ul.t li.show a{position: relative; bottom: -1px;height:25px;background:#fff;border:1px solid #C5E0F0; border-bottom:none;width:53px; }
#seoblock ul.content{width:174px;}
#seoblock ul.content li{display:none;}
#seoblock ul.content li.show{display:block; border:1px solid #C5E0F0; overflow: hidden;margin-bottom:5px;}
#seoblock ul.content li p{line-height:24px; padding-left:5px;}
#seoblock ul.content li p a{white-space:nowrap; margin: 0 8px;}
</style>
</head>
<body>
<div id="seoblock">
<h2><span>家居就商城</span><span>品牌网店</span></h2>
<!--第一行开始-->
<ul class="t">
<li class="show"><a href="###">家1</a></li>
<li><a href="###">家2</a></li>
<li><a href="###">家3</a></li>
</ul>
<ul class="content">
<li class="show"><p><a href="#">家1</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家2</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家3</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第一行结束-->
<!--第二行开始-->
<ul class="t">
<li><a href="###">家11</a></li>
<li><a href="###">家22</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第二行结束-->
<!--第三行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第三行结束-->
<!--第四行开始-->
<ul class="t">
<li><a href="###">家居</a></li>
<li><a href="###">家居</a></li>
<li><a href="###" class="mr0">家居</a></li>
</ul>
<ul class="content">
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
<li><p><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a><a href="#">家居</a></p></li>
</ul>
<!--第四行结束-->
</div>
<script>
var seoObj = document.getElementsByTagName("ul");
var tLi = [],
contentLi = [],
indexOld = 0;
//获取所有className是t的ul
for(var i = 0; i< seoObj.length; i++){
if(seoObj[i].className == "t"){
fnPush(seoObj[i],tLi);
}
if(seoObj[i].className == "content"){
fnPush(seoObj[i],contentLi);
}
}
for (var i=0; i<tLi.length; i++){
var that = tLi[i];
addEvent( that );
}
function addEvent(that){
// alert(indexOfArray(that,tLi));
if (window.attachEvent){
that.attachEvent('onmouseover',function(){
changeClass.call(that);
});
} else {
that.addEventListener('mouseover',function(){
changeClass.call(that)
},false);
}
}
//获取标题dom和内容dom
function fnPush(seoObj,tORcontent){
var seoObjs = seoObj.childNodes,
len = seoObjs.length;
for (var j = 0; j < len; j++ )
{
if (seoObjs[j].nodeName == "LI")
{
tORcontent.push(seoObjs[j]);
}
}
}
function changeClass() {
//alert(this.tagName);
if (hasClass(this,"show") == null){
removeClass(tLi[indexOld],"show");
addClass(this,"show");
//alert(indexOfArray(that,tLi));
removeClass(contentLi[indexOld],"show");
addClass(contentLi[indexOfArray(this,tLi)],"show");
}
indexOld = indexOfArray(this,tLi);
}
//添加删除样式
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
if (element.className == undefined){
return null;
} else {
return element.className.match(reg);
}
}
function addClass(element, className) {
if (!this.hasClass(element, className))
{
element.className = className;
}
}
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,'');
}
}
function indexOfArray(elem,array){
for (var z = 0; z<array.length; z++ )
{
if(elem == array[z]){
return z;
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js的一个有意思的小题，闭包解决getElementByTagName的for循环绑定事件错误问题
- JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的索引？
- js中用for循环事件绑定的小问题
- for循环绑定监听事件索引值总是最后一个
- 【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个
- 4种方法解决为 li列表 添加事件问题（for循环经典问题）
- for循环绑定事件时，var和let声明循环变量的区别
- JQuery在循环中绑定事件的问题详解
- JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案
- javascript 循环遍历绑定事件问题
- let用来处理循环事件绑定问题的原理分析
- 给for循环出来的html绑定事件
- 遇到的问题（JS循环绑定事件）
- js动态循环绑定事件的变量问题
- JQuery在循环中绑定事件的问题详解
- JavaScript的for循环中嵌套一个点击事件的问题解决
- jQuery中在循环中绑定事件容易出现的问题
- for循环绑定事件与闭包
- JQuery在循环中绑定事件的问题详解
- jQuery 循环 绑定事件 问题记录