利用闭包实现onclick事件传递参数

最新推荐文章于 2024-03-18 17:47:00 发布

xyz1253587469

最新推荐文章于 2024-03-18 17:47:00 发布

阅读量5.1k

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/yxwb1253587469/article/details/53230394

版权

html+css+js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

当触发点击事件，一个简单的例子。

<!DOCTYPE html>
<html>
<head>
    <title>闭包创建数组</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function (){
            var lis = document.getElementsByTagName('li');

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    console.log(this.innerHTML);
                };
            }
        }
    </script>
</head>
<body>
    <h2>闭包点击事件</h2>
    <ul>
        <li>奔驰</li>
        <li>宝马</li>
        <li>奥迪</li>
    </ul>
</body>
</html>

但是，当我想要得到循环外的变量值。

<!DOCTYPE html>
<html>
<head>
    <title>闭包创建数组</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function (){
            var lis = document.getElementsByTagName('li');
            var price = [1, 10, 100];

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    console.log(this.innerHTML+ '的价格:' + price[i]);
                };
            }
        }
    </script>
</head>
<body>
    <h2>闭包点击事件</h2>
    <ul>
        <li>奔驰</li>
        <li>宝马</li>
        <li>奥迪</li>
    </ul>
</body>
</html>

这里写图片描述
由于当我点击的时候，i的值已经是3了，所以会undefined。现在的问题就是怎么才能在每次循环中把i的值保存下来。

<!DOCTYPE html>
<html>
<head>
    <title>闭包创建数组</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = function (){
            var lis = document.getElementsByTagName('li');
            var price = [1, 10, 100];

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = (function (n) {
                    console.log("i:"+i+";n:"+n);
                    return function () {
                        console.log(this.innerHTML+ '的价格:' + price[n]);
                    };
                })(i);
            }
        }
    </script>
</head>
<body>
    <h2>闭包点击事件</h2>
    <ul>
        <li>奔驰</li>
        <li>宝马</li>
        <li>奥迪</li>
    </ul>
</body>
</html>