下面程序里面i的值为什么是5?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="scripts/jquery-1.10.2.js"></script>
</head>
<body>
        <button> 0 </button>
        <button> 1 </button>
        <button> 2 </button>
        <button> 3 </button>
        <button> 4 </button>

        <div id="log"></div>

        <script>
            var logDiv = $( "#log" );

            for ( var i = 0; i < 5; i++ ) {
                $( "button" ).eq( i ).on( "click", { value: i}, function( event ) {
                    var msgs = [
                        "button = " + $( this ).index(),
                        "event.data.value = " + event.data.value,
                        "i = " + i
                    ];
                    logDiv.append( msgs.join( ", " ) + "<br>" );
                });
            }
        </script>

</body>
</html>

msgs对象内输出的i是绑定事件之后的值，所以是5。想要跟按钮数字相同就用event.data.value呗

这就涉及到js的闭包概念，你绑定事件的时候for循环已经走完了，如果你想点击哪个button加载对应数的button，应该使用闭包，将i值传进去。

for循环在网页初始化的过程中就已经走完了，当执行点击事件是i的值已经是5

闭包。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="jquery.js"></script>
</head>

<body>
    <button> 0 </button>
    <button> 1 </button>
    <button> 2 </button>
    <button> 3 </button>
    <button> 4 </button>
    <div id="log"></div>
    <script>
    var logDiv = $("#log");

    for (var i = 0; i < 5; i++) {
        (function(i) {
            $("button").eq(i).on("click", {
                value: i
            }, function(event) {
                var msgs = [
                    "button = " + $(this).index(),
                    "event.data.value = " + event.data.value,
                    "i = " + i
                ];
                logDiv.append(msgs.join(", ") + "<br>");
            });
        })(i)
    }
    </script>
</body>

</html>

【热门文章】