如何通过一个循环执行一系列a标签的onclick事件
根据后台数据库动态生成a标签，假设数据库读出的数据如下(共6条)：
- HTML code
num[0] = 1;num[1] = 3;num[2] = 2;num[3] = 4;num[4] = 13;num[5] = 51;
那么我用JS生成6个a标签，如下：
- HTML code
<a href="#" id="a0"></a><a href="#" id="a1"></a><a href="#" id="a2"></a><a href="#" id="a3"></a><a href="#" id="a4"></a><a href="#" id="a5"></a>
我利用jQuery，在JS文件中为每个a标签定义一个onclick事件，其中id为a0的a标签onclick事件接受num[0]作为参数，id为a5的a标签onclick事件接受num[5]作为参数，再执行我自定义的函数myFunction()。如下：
- JScript code
$("#a0").click(function(){myFunction(num[0])});$("#a5").click(function(){myFunction(num[5])});但数据库提取出来的数据行是不确定的，像上面写肯定不可取。我的想法是能不能通过一个循环来实现，形如：
- JScript code
for(var i = 0; i< num.length; i++){ $("a" + i).click(function(){ myFunction(num[i]); }); //实际上这个代码有问题}求高手解决！谢谢！
[解决办法]
- HTML code
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> </style> </head> <body> <script> var arr = [ '测试1', '测试2', '测试3', '测试4', '测试5', '测试6' ]; for(var i = 0; i < arr.length; i++){ var a = document.createElement('a'); a.innerHTML = arr[i]; a.href = '#'; (function(i){ a.onclick = function(){ return myFunction(i) } })(i); document.body.appendChild(a); document.write('<br/>') } function myFunction(i){ alert(i) } </script> </body></html>
[解决办法]
$("a").each(function(i){
$(this).bind("click",{MenuIndex:i},function(event){
myFunction(num[event.data.MenuIndex]);
})
});
[解决办法]
- HTML code
<html><head> <title></title> <script type="text/javascript"> window.onload = function () { var aLinkListElement = document.getElementById("aLinkList"); aLinkListElement.onclick = function (e) { e = e || window.event; var srcElement = e.target || e.srcElement; var elementName = srcElement && srcElement.nodeName; if (!elementName) { return; } if (elementName.toUpperCase() != "A") { return; } aOnclick(srcElement.getAttribute("value")); } } function aOnclick(value) { alert(value); } </script></head><body> <div id="aLinkList"> <a href="#" id="a0" value="1">a0</a> <br /> <a href="#" id="a1" value="3">a1</a> <br /> <a href="#" id="a2" value="2">a2</a> <br /> <a href="#" id="a3" value="4">a3</a> <br /> <a href="#" id="a4" value="13">a4</a> <br /> <a href="#" id="a5" value="51">a5</a> </div></body></html>