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>

...全文
217 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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> 


87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧