js闭包问题

今天遇到一个问题，点击每个div里面的按钮，会弹出一个表单，在表单的提交回调里面获取该div里面的一个隐藏域的值，只有第一次的值是对的，以后每次点击都是第一次的值。我知道问题应该是出在闭包上了，但是不知道如何解决，实际问题比这个复杂多了，所以不方便在提交回调里去获取隐藏域的值，求各路大神支招

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <script src="jquery.js"></script>
        <script src="jquery.validate.js"></script>
        <script src="template.js"></script>
        <style>
            div{ margin: 100px;}
            form{ display: none;}
        </style>
    </head>
    <body>
        <div>
            <input type="hidden" name="" value= "1">
            <input type="button" class="btn" value="click">
        </div>
         <div>
            <input type="hidden" name="" value= "2">
            <input type="button" class="btn" value="click">

        </div>
        <div>
            <input type="hidden" name="" value= "3">
            <input type="button" class="btn" value="click">
        </div>
        <form action="" id="myForm">
            <input type="text" name="username">
            <input type="text" name="email">
            <input type="submit" value="ok">
        </form>


<script>
    
    var aDiv = $("div");
    var oForm = $("#myForm");
    
    aDiv.each(function (){
        var self = $(this);
        
        var oBtn = self.find(".btn");
        oBtn.click(function (){
            var id = $(this).prev().val();
            console.log(id);
            oForm.show().validate({
                debug: true,
                submitHandler: function (form) {
                    console.log(id); // 第二次以后点击都是第一个的值
                    oForm.hide().get(0).reset();
                }
            });
        });
        
    });
    
</script>


    </body>
</html>

javascript

阅读 3.4k

3 个回答

前端程序媛

✓ 已被采纳

哎，没想通是哪里的问题，但是解决了，醉了

<script> 
    var aDiv = $("div");
    var oForm = $("#myForm");
    var id;   //注意这里 我改的是这里

    aDiv.each(function (){
        var self = $(this);
        console.log(this);

        var oBtn = self.find(".btn");
        oBtn.click(function (){
            id = $(this).prev().val();  //注意这里我改的是这里
            console.log(id);
            oForm.show().validate({
                debug: true,
                submitHandler: function (form) {
                    console.log(id);
                    oForm.hide().get(0).reset();
                }
            });
        });    
    });  
</script>

你试下是不是想要的效果吧