87,997
社区成员
发帖
与我相关
我的任务
分享js创建超级链接的onclick事件问题
如下三个超级链接，为何点击都是说“第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>
...全文
请发表友善的回复…
发表回复
香蕉猪 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
- 打赏
- 举报
因为你之前那么写 在你点击的时候 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>
