首页 » 工作 » 正文

jquery:操作动态加载的元素[附:金额计算示例]

发布者:站点默认
2012/01/2 浏览数(2,191) 分类:工作 jquery:操作动态加载的元素[附:金额计算示例]已关闭评论

说明:

这篇文章可以解决这几个问题:

一、从已经获取到的元素中再次获取其子元素(代码第6、7行);

二、为动态加载的元素绑定事件(代码第三行的“.live”);

三、JS浮点运算不“准确”(第二个代码块);

示例:

用jquery计算动态加载产品的金额

用jquery计算动态加载产品的金额

代码:

说明:这些只是“核心”代码。

// 金额计算器
$(function(){
	$('input.count,input.price').live('change', function(){
		// 根据单价计算金额
		var p = $(this).parents('.productList');
		var count = $('input.count',p).val();
		var price = $('input.price',p).val();
		v = calcMul(count,price);
		$('input.amount',p).val(v);
		// 根据上一步得出的金额计算总金额
		totalAmount = 0;
		$('#prodList input.amount').each(function(){
			totalAmount  = calcAdd(totalAmount,this.value);
		});
		$('#totalAmount').val(totalAmount);
	});
});

JS的浮点运算貌似有点问题,这是“补丁”:

// 加、减、乘、除的四个运算
function calcAdd(arg1,arg2){ // 加
	var r1,r2,m;
	try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
	try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
	m=Math.pow(10,Math.max(r1,r2))
	return (arg1*m+arg2*m)/m
}
function calcSub(arg1,arg2){ // 减
     var r1,r2,m,n;
     try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
     try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
     m=Math.pow(10,Math.max(r1,r2));
     n=(r1>=r2)?r1:r2;
     return ((arg1*m-arg2*m)/m).toFixed(n);
}
function calcMul(arg1,arg2){ // 乘
	var m=0,s1=arg1.toString(),s2=arg2.toString();
	try{m+=s1.split(".")[1].length}catch(e){}
	try{m+=s2.split(".")[1].length}catch(e){}
	return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
function calcDiv(arg1,arg2){ // 除
	var t1=0,t2=0,r1,r2;
	try{t1=arg1.toString().split(".")[1].length}catch(e){}
	try{t2=arg2.toString().split(".")[1].length}catch(e){}
	with(Math){
		r1=Number(arg1.toString().replace(".",""))
		r2=Number(arg2.toString().replace(".",""))
		return (r1/r2)*pow(10,t2-t1);
	}
}

<完>

文章已经结束以下是一些废话,写一些关健词方便朋友们需要答案时能找到这篇文章。

jquery从获取到的元素对象中再次获取元素、通过父元素得到其中的子元素、怎么获取JQuery动态生成的元素的值?、动态添加的元素无法获取其值、JS浮点运算存在陷阱、js 浮点运算问题、js 浮点运算不准确(精确)、js 浮点运算不准确是怎么回事。

如果你有上边的问题,请将滚动条拖至顶部开始查看。如有疑问请留言。

点击返回顶部
  1. 留言
  2. 联系方式