jquery - 如何循环blur方法
本文介绍了jquery - 如何循环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>
解决方案
改为:
for(var i= 0;i<4;i++)
{
//for循环内部
(function(i){
//你的代码
})(i)
}闭包问题, 当你循环完绑定blur事件之后, i=4(循环到最后一次 i++等于4时跳出循环), 所以在触发事件的回调的时候, 函数内部所有的i 都是4;
这篇关于jquery - 如何循环blur方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
