每个子元素点击一次都显示其在父层中的index值的功能？

比如一个ul li列表，点击任一li后都显示其在ul里面的index值，我是用循环实现的，但只要一循环，i的值就会变成最大值，无法达到这样的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>javascript</title>
<style type="text/css">
html,body,ul,li{ margin:0; padding:0; list-style:none; border:0; }
body{ padding:2em; font:100%/1.6 Verdana; color:#666; background: #fff; }
a{ text-decoration: none; }
</style> 
</script>
</head>
<body>
<ul id="info">
<li>apple</li>
<li>google</li>
<li>facebook</li>
<li>yahoo</li>
<li>microsoft</li>
<li>ibm</li>
</ul>
<script type="text/javascript">
//<![CDATA[
    var infoList=document.getElementById("info").getElementsByTagName("li");
    var infoListLength=infoList.length;
    for(var i=0; i<infoListLength; i++){
        alert(i+" : "+infoList[i].innerHTML);
        //下面不知道如何实现了，一循环 i 的值就会变成最大值。
        infoList[i].onclick=function(){ alert("显示其index值"); }
    }
//]>
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>javascript</title>
    <style type="text/css">
    html,body,ul,li{ margin:0; padding:0; list-style:none; border:0; }
    body{ padding:2em; font:100%/1.6 Verdana; color:#666; background: #fff; }
    a{ text-decoration: none; }
    </style> 
    </script>
    </head>
    <body>
    <ul id="info">
    <li>apple</li>
    <li>google</li>
    <li>facebook</li>
    <li>yahoo</li>
    <li>microsoft</li>
    <li>ibm</li>
    </ul>
    <script type="text/javascript">
    //<![CDATA[
        var infoList=document.getElementById("info").getElementsByTagName("li");
        var infoListLength=infoList.length;
        for(var i=0; i<infoListLength; i++){
            alert(i+" : "+infoList[i].innerHTML);
            //下面不知道如何实现了，一循环 i 的值就会变成最大值。
            infoList[i].onclick=function(i){ return function(){alert("index为"+i)} }(i)
        }
    //]>
    </script>
    </body>
    </html>
      

  2.   

    谢谢楼上的，通过：infoList[i].onclick=function(i){ return function(){alert("index为"+i)} }(i)  实现了这样的效果，就是不理解“ infoList[i].onclick=function(i){ return function(){alert("index为"+i)} }(i) ”的真正含义，特别是最后还加上了: ...}(i)
      

  3.   

    //分解：
    infoList[i].onclick=aa(i);
    function aa(i)
    {
         return function(){alert("index为"+i);};
    }
      

  4.   

    function(i){ return function(){alert("index为"+i)} }(i)
    这个是方便的写法
    定义函数加立马调用
    这个函数返回一个函数
    其实就是变成
    onclick = function(){alert("index为"+i的值)}
      

  5.   

    为什么infoList[i].onclick=aa(i);
    function aa(i)
    {
      return function(){alert("index为"+i);};
    }
    /*=========*/
    infoList[i].onclick=function(i){ return function(){alert("index为"+i)} }(i)就可以，而：infoList[i].onclick=function(){ alert(i); //i变成了最大值 }; 就不可以？
      

  6.   


    <!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>
        <title></title>
        <script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#info li").click(function () {
                    var $curentLi = $(this);
                    $("#info li").each(function (k, v) {
                        if ($(v).text() == $curentLi.text()) {
                            alert(k);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
    <ul id="info">
    <li>apple</li>
    <li>google</li>
    <li>facebook</li>
    <li>yahoo</li>
    <li>microsoft</li>
    <li>ibm</li>
    </ul>
    </body>
    </html>
    我用JQUERY给你写了一个
      

  7.   

    7楼的不错，简单
     用的时候记得添加jquery的js文件。
      

  8.   

    玩玩jq
    <!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>
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var ul = $('#info li');
                ul.click(function () {
                    alert(ui.index(this) + 1);
                });
            });
        </script>
    </head>
    <body>
    <ul id="info">
    <li>apple</li>
    <li>google</li>
    <li>facebook</li>
    <li>yahoo</li>
    <li>microsoft</li>
    <li>ibm</li>
    </ul>
    </body>
    </html>
      

  9.   

    <!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>
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var ui = $('#info li');
                ui.each(function(k,d){
                    $(this).click(function(){alert(k+1)})
                })
            });
        </script>
    </head>
    <body>
    <ul id="info">
    <li>apple</li>
    <li>google</li>
    <li>facebook</li>
    <li>yahoo</li>
    <li>microsoft</li>
    <li>ibm</li>
    </ul>
    </body>
    </html>
      

  10.   


    for(var i=0; i<infoList.Length; i++)
    {
            //下面不知道如何实现了，一循环 i 的值就会变成最大值。
            infoList[i].onclick=function(){ alert(i);}; }
    }
    //////////
    上面这个循环，给infolist的所有元素注册点击事件，但并没有调用，点击时才调用。当点击时，会执行alert(i)。但这个i是局部变量，默认情况下只在循环中有效。而现在需要使用i。所以这个时候编译器会将变量i的作用域进行延长。就相当于这样的了：
    var j=0;
    for(var i=0; i<infoList.Length; i++)
    {
           j=i;
            //下面不知道如何实现了，一循环 i 的值就会变成最大值。
            infoList[i].onclick=function(){ alert(j);}; }
    }//最后弹出的i的值实际上是j的值
      

  11.   

    所以应该传值。
    for(var i=0; i<infoList.Length; i++)
    {
            //下面不知道如何实现了，一循环 i 的值就会变成最大值。
            infoList[i].onclick=function(i){ alert(i);}; }
    }