如何循环blur方法

需实现效果,当单价blur时,如果当前行的项目名称不为空,而单价为空时,弹出当前行单价不能为空。需要做到循环,但是获取不到当前行的项目名称,在单价的blur方法中弹出的i并不是当前行,而是最后一行。请问怎么解决?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table{}
table td{border:1px solid #000; height:35px; line-height:35px;}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){

    
for(var i= 0;i<4;i++)
 {
    if(i==0)
    {
        $("#txtAssetName_0").blur(function(){
            if($(this).val()=="")
            {
                alert("项目名称不能为空!");       
                return false;       
            }
            
        })                              
    }
        $("#txtPrize_"+i).blur(function(){
            if($("#txtPrize_"+i).val()=="")
            {
                if($("#txtAssetName_"+i).val()!="")
                {
                    
                    alert("第"+(i+1)+"行的单价不能为空!");       
                    return false;       
                }
            }                   
            else 
            {
                if(!checkPrize($("#txtPrize_"+i).val()))
                {
                    alert('请在第'+(i+1)+'行输入正确的单价格式,如123或123.00!');
                    $("#txtPrize_"+i).val("");
                    return false;
                }
            }
        });

 }
})
</script>
</head>

<body>
<table style="border-collapse:collapse; border:1px solid #000;" >
                    <tbody>
                    <tr>
                        <td class="td3">
                            <span class="spans">*</span>项目名称
                        </td>
                        <td class="td4">
                            <span class="spans">*</span>单价
                        </td>
                        <td class="td5">
                            <span class="spans">*</span>数量
                        </td>
                        <td class="td6">
                            <span class="spans">*</span>金额
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="txtAssetName_0" type="text" id="txtAssetName_0" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtPrize_0" type="text" id="txtPrize_0" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtNum_0" type="text" id="txtNum_0" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtSingleTotal_0" type="text" id="txtSingleTotal_0" class="textbox" multiline="true">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="txtAssetName_1" type="text" id="txtAssetName_1" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtPrize_1" type="text" id="txtPrize_1" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtNum_1" type="text" id="txtNum_1" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtSingleTotal_1" type="text" id="txtSingleTotal_1" class="textbox" multiline="true">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="txtAssetName_2" type="text" id="txtAssetName_2" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtPrize_2" type="text" id="txtPrize_2" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtNum_2" type="text" id="txtNum_2" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtSingleTotal_2" type="text" id="txtSingleTotal_2" class="textbox" multiline="true">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="txtAssetName_3" type="text" id="txtAssetName_3" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtPrize_3" type="text" id="txtPrize_3" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtNum_3" type="text" id="txtNum_3" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtSingleTotal_3" type="text" id="txtSingleTotal_3" class="textbox" multiline="true">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="txtAssetName_4" type="text" id="txtAssetName_4" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtPrize_4" type="text" id="txtPrize_4" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtNum_4" type="text" id="txtNum_4" class="textbox" multiline="true">
                        </td>
                        <td>
                            <input name="txtSingleTotal_4" type="text" id="txtSingleTotal_4" class="textbox" multiline="true">
                        </td>
                    </tr>
                    
                   
                </tbody></table>
</body>
</html>
阅读 3.3k
2 个回答

改为:

for(var i= 0;i<4;i++)
{
    //for循环内部
    (function(i){
       //你的代码
    })(i)
}

闭包问题, 当你循环完绑定blur事件之后, i=4(循环到最后一次 i++等于4时跳出循环), 所以在触发事件的回调的时候, 函数内部所有的i 都是4;

闭包引起的。传入 blur 的匿名函数是个闭包,所以传入的是 i 的引用,而非 i 的值。最后 i 的赋值为最后一行,于是所有 blur 监听函数中的 i 都指向了最后一行。

解决方法就不给了,闭包的知识对于前端很很重要,资料也很多,一定要先搞清楚。

另外,这种情况最佳实践是使用事件代理,或者 jQuery 事件绑定 API。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进