js创建超级链接的onclick事件问题

oceanmeng 2015-07-30 10:22:31

如下三个超级链接，为何点击都是说“第4个链接”，我想点击第一个就提示第一个链接，依次类推，为了onclick事件取得不对？



<HTML>  

<HEAD>  

<TITLE> New Document </TITLE>  

<script>  

function newelement(){

for(var i=1;i<4;i++){

var a=document.createElement("a");

a.innerHTML="aaa"+i;   

a.onclick=function(){alert('第'+i + '个链接');};

var img=new Image();  

img.src="http://img.baidu.com/img/post-jg.gif";  

img.style.border="none";  



a.appendChild(img)  

document.getElementById("oData"+i).appendChild(a);  



img.onmouseover=function(){  

this.src="http://www.baidu.com/img/sslm1_logo.gif";  

}  



img.onmouseout=function(){  

this.src="http://img.baidu.com/img/post-jg.gif";  

} 



} 

}  

</script>  

</HEAD>  

<BODY onload=newelement()>  

         <SPAN ID="oData1" ></SPAN>   

         <SPAN ID="oData2" ></SPAN>   

         <SPAN ID="oData3" ></SPAN>  

</BODY>

...全文

219 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2015-07-31

打赏
举报

href传参是不错的，，，另，，，楼主的这类问题，，，极力推荐jq解决。。。

forwardNow 2015-07-31

打赏
举报


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

<!--

    1. 函数定义时的作用域链到函数执行时依然有效
    2. 函数只有调用时才会执行，定义时里面的代码是不会执行的。

-->

    <input type="button" name="btn" value="button1"> <br>
    <input type="button" name="btn" value="button2"> <br>
    <input type="button" name="btn" value="button3"> <br>
    <script>
        var btns = document.getElementsByName( "btn" );

        for ( var i = 0; i < btns.length; i++ ) {
            btns[ i ].onclick = function () {
                console.info( "click button------ " + i );
            }
        }

        // 把for循环的每次循环的执行一一列出，会更加容易理解一些。


/* ==>
        ( function () {

            var i = 0;
            btns[ i ].onclick = function () {
                console.info( "click button------ " + i );
            }     

            var i = 1;
            btns[ i ].onclick = function () {
                console.info( "click button------ " + i );
            } 

            var i = 2;
            btns[ i ].onclick = function () {
                console.info( "click button------ " + i );
            }                    

            var i = 3;

            btns[ 0 ].click();  // 调用时，i = 3
            btns[ 1 ].click();
            btns[ 2 ].click();
            
        } ) ();
*/
    </script>

    <hr>

<!--  
    我以前也遇到过上面的疑惑，我就额外定义了一个局部变量 index 来临时存储 for中变量i ；
    感觉能解决，但最后发现不行，原因就是忽略了函数在调用时才会执行，
    而调用是通过事件来触发的。
-->
    <input type="button" name="btn2" value="button1"> <br>
    <input type="button" name="btn2" value="button2"> <br>
    <input type="button" name="btn2" value="button3"> <br>
    <script>
        var btn2s = document.getElementsByName( "btn2" );

        for ( var i = 0; i < btn2s.length; i++ ) {
            var index = i;
            btn2s[ i ].onclick = function () {
                console.info( "click button2------ " + index );
            }
        }  
/* ==>
        ( function () {

            var i = 0;
            var index = i;
            btn2s[ i ].onclick = function () {
                console.info( "click button2------ " + index );
            }  

            var i = 1;
            var index = i;
            btn2s[ i ].onclick = function () {
                console.info( "click button2------ " + index );
            }

            var i = 2;
            var index = i;
            btn2s[ i ].onclick = function () {
                console.info( "click button2------ " + index );
            }                  
            
            var  i = 3;

        } ) ();
*/        
    </script>

    <hr>
<!--  
    通过闭包能解决这个问题。
-->
    <a href="#" name="link"> link1 </a> <br>
    <a href="#" name="link"> link2 </a> <br>
    <a href="#" name="link"> link3 </a> <br>
    <script>
        var links = document.getElementsByName( "link" );

        for ( var i = 0; i < links.length; i++ ) {

            ( function ( index ) {
                links[ i ].onclick = function () {
                    console.info( "click link------ " + index );
                }        
            } ) ( i );

        }
/* ==>
        ( function () {

            var i = 0;
            ( function ( index ) {
                links[ i ].onclick = function () {
                    console.info( "click link------ " + index );
                }        
            } ) ( i );  

            var i = 1;
            ( function ( index ) {
                links[ i ].onclick = function () {
                    console.info( "click link------ " + index );
                }        
            } ) ( i );  

            var i = 2;
            ( function ( index ) {
                links[ i ].onclick = function () {
                    console.info( "click link------ " + index );
                }        
            } ) ( i );  

            var i = 3;

            links[ 0 ].click();
            links[ 1 ].click();
            links[ 2 ].click();

        } ) ();
*/         
    </script>


</body>
</html>

化繁为简2007 2015-07-31

打赏
举报

datarrow 2015-07-31

打赏
举报

调用js 1.href 链接 <a href="javascript:alert(88)">A</a> 2.event 事件触发 <a onclick="alert(88); return false" href="#">B</a> 都能调js

sydhr_1994 2015-07-31

打赏
举报

引用 2 楼 oceanmeng 的回复:

谢谢,可以,奇怪,为何onclick这样？另外，我发现这样也可以，不用oclick a.href="javascript:alert('第"+i + "个链接')";

因为你之前那么写在你点击的时候 i已经循环到4了。所以需要使用闭包或者把i存到a的自定义属性当中

oceanmeng 2015-07-30

打赏
举报

谢谢,可以,奇怪,为何onclick这样？另外，我发现这样也可以，不用oclick a.href="javascript:alert('第"+i + "个链接')";

天际的海浪 2015-07-30

打赏
举报


<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<script>  
function newelement(){
for(var i=1;i<4;i++)(function(i){
var a=document.createElement("a");
a.innerHTML="aaa"+i;   
a.onclick=function(){alert('第'+i + '个链接');};
var img=new Image();  
img.src="http://img.baidu.com/img/post-jg.gif";  
img.style.border="none";  

a.appendChild(img)  
document.getElementById("oData"+i).appendChild(a);  

img.onmouseover=function(){  
this.src="http://www.baidu.com/img/sslm1_logo.gif";  
}  

img.onmouseout=function(){  
this.src="http://img.baidu.com/img/post-jg.gif";  
} 

})(i); 
}  
</script>  
</HEAD>  
<BODY onload=newelement()>  
         <SPAN ID="oData1" ></SPAN>   
         <SPAN ID="oData2" ></SPAN>   
         <SPAN ID="oData3" ></SPAN>  
</BODY>