如何通过一个循环执行一系列a标签的onclick事件

Leo2048 2012-03-22 05:15:18

根据后台数据库动态生成a标签，假设数据库读出的数据如下(共6条)：



num[0] = 1;

num[1] = 3;

num[2] = 2;

num[3] = 4;

num[4] = 13;

num[5] = 51;

那么我用JS生成6个a标签，如下：



<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()。如下：



$("#a0").click(function(){myFunction(num[0])});

$("#a5").click(function(){myFunction(num[5])});

但数据库提取出来的数据行是不确定的，像上面写肯定不可取。我的想法是能不能通过一个循环来实现，形如：



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

   $("a" + i).click(function(){ myFunction(num[i]); });  //实际上这个代码有问题

}

求高手解决！谢谢！

...全文

699 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

Leo2048 2012-03-22

打赏
举报

Leo2048 2012-03-22

打赏
举报

[Quote=引用 2 楼 calmcrime 的回复:]

HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>

<scrip……
[/Quote]
谢谢你！你的代码我测试过了，是可以的～

Leo2048 2012-03-22

打赏
举报

[Quote=引用 4 楼 kinghome 的回复:]

$("a").each(function(i){
$(this).bind("click",{MenuIndex:i},function(event){
myFunction(num[event.data.MenuIndex]);
})
});
[/Quote]
谢谢！你这个方法很简洁。我忘了写了一个限制，我页面上还有其它a标签，但这些标签不执行myFunction()函数，请问如何改动呢？

#blackheart 2012-03-22

打赏
举报



<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>

#blackheart 2012-03-22

打赏
举报

[Quote=引用 5 楼 julyyq 的回复:]

冒泡呗，不就是用来处理LZ这样的需求最简单的办法么
[/Quote]
++

julyyq 2012-03-22

打赏
举报

冒泡呗，不就是用来处理LZ这样的需求最简单的办法么

kinghome 2012-03-22

打赏
举报

$("a").each(function(i){
$(this).bind("click",{MenuIndex:i},function(event){
myFunction(num[event.data.MenuIndex]);
})
});

kinghome 2012-03-22

打赏
举报

把一个范围的a遍历，绑定单击事件就可以啦
$("a").each(function(i){
$(this).bind("click",{MenuIndex:i},function(event){
myFunction(event.data.MenuIndex);
})
})

001007009 2012-03-22

打赏
举报



<!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>