快捷導(dǎo)航

javascript使用for循環(huán)批量注冊(cè)的事件不能正確獲取索引值的解決方法

更新時(shí)間：2014年12月20日 11:26:04 投稿：shichen2014

這篇文章主要介紹了javascript使用for循環(huán)批量注冊(cè)的事件不能正確獲取索引值的解決方法,對(duì)比分析了出現(xiàn)問題的代碼與修改后的代碼,并給出了采用閉包實(shí)現(xiàn)的方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript使用for循環(huán)批量注冊(cè)的事件不能正確獲取索引值的解決方法。分享給大家供大家參考。具體分析如下：

可能不少朋友會(huì)遇到一個(gè)問題，那就是當(dāng)使用for循環(huán)批量注冊(cè)事件處理函數(shù)，然后最后通過事件處理函數(shù)獲取當(dāng)前元素的索引值的時(shí)候會(huì)失敗，先看一段代碼實(shí)例:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    oLis[index].onclick=function(){

      oshow.innerHTML=index;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奮斗才會(huì)有美好的明天。</li>

  <li>分享互助是進(jìn)步最大的源動(dòng)力。</li>

  <li>每一天都是新的，要好好珍惜。</li>

  <li>沒有人一開始就是高手，只有努力才有成長(zhǎng)的可能</li>

  <li>只有當(dāng)下的時(shí)間是可貴的，下一秒都是虛幻的</li>

</ul>

</body>

</html>

在上面的代碼中，當(dāng)點(diǎn)擊li元素的時(shí)候彈出值始終是四，我們本來的想法是，點(diǎn)擊li元素在div中顯示當(dāng)前l(fā)i元素的索引值，下面就簡(jiǎn)單分析一下其中的原因。原因非常的簡(jiǎn)單，當(dāng)for循環(huán)執(zhí)行完畢以后，index的值已經(jīng)變?yōu)樗?，于是也就出現(xiàn)了上面的現(xiàn)象。
代碼修改如下:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    oLis[index]._index=index;

    oLis[index].onclick=function(){

      oshow.innerHTML=this._index;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奮斗才會(huì)有美好的明天。</li>

  <li>分享互助是進(jìn)步最大的源動(dòng)力。</li>

  <li>每一天都是新的，要好好珍惜。</li>

  <li>沒有人一開始就是高手，只有努力才有成長(zhǎng)的可能</li>

  <li>只有當(dāng)下的時(shí)間是可貴的，下一秒都是虛幻的</li>

</ul>

</body>

</html>

上面的代碼實(shí)現(xiàn)了我們的要求，當(dāng)然也可以使用閉包的方式，代碼如下:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    (function(index){

      oLis[index].onclick=function(){

        oshow.innerHTML=index;

      }

    })(index)

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奮斗才會(huì)有美好的明天。</li>

  <li>分享互助是進(jìn)步最大的源動(dòng)力。</li>

  <li>每一天都是新的，要好好珍惜。</li>

  <li>沒有人一開始就是高手，只有努力才有成長(zhǎng)的可能</li>

  <li>只有當(dāng)下的時(shí)間是可貴的，下一秒都是虛幻的</li>

</ul>

</body>

</html>