Django学习笔记（四十六）:js,jq实现前端数据动态显示

			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{ sku.price }}</em></span>
				<span class="show_unit">单  位：{{ sku.unite }}</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>	
				</div> 
			</div>

        update_goods_amount()
        // 计算商品的总价格
        function update_goods_amount() {
            // 获取商品的单价和数量
            price = $('.show_pirze').children('em').text()
            count = $('.num_show').val()
            // 计算商品的总价
            price = parseFloat(price)
            count = parseInt(count)
            amount = price*count
            // 设置商品的总价
            $('.total').children('em').text(amount.toFixed(2)+'元')
        }

        // 增加商品的数量
        $('.add').click(function () {
            // 获取商品原有的数目
            count = $('.num_show').val()
            // 加1
            count = parseInt(count)+1
            // 重新设置商品的数目
            $('.num_show').val(count)
            // 更新商品的总价
            update_goods_amount()
        })

        // 减少商品的数量
        $('.minus').click(function () {
            // 获取商品原有的数目
            count = $('.num_show').val()
            // 减1
            count = parseInt(count)-1
            if (count <= 0){
                count = 1
            }
            // 重新设置商品的数目
            $('.num_show').val(count)
            // 更新商品的总价
            update_goods_amount()
        })

        // 手动输入商品的数量
        $('.num_show').blur(function () {
            // 获取用户输入的数目
            count = $(this).val()
            // 校验count是否合法 trim()将两边空格去除
            if (isNaN(count) || count.trim().length==0 || parseInt(count) <=0){
                count = 1
            }
            // 重新设置商品的数目
            $(this).val(parseInt(count))
            // 更新商品的总价
            update_goods_amount()
        })