python3 之 天天生鲜 详情页 商品详情展示 以及 商品数量变化

<ul class="detail_tab clearfix">
                <li class="active" id="tag_detail">商品介绍</li>
                <li id="tag_comment">评论</li>
            </ul>

            <div class="tab_content" id="tab_detail">
                <dl>
                    <dt>商品详情：</dt>
                    <dd>
                        {{ sku.goods.desc }}&nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&gt;&gt;自动转义
                        <hr>
{#      ------------   过滤器safe 关闭转义      -------------        #}&gt;&gt;&gt;&gt;过滤器safe关闭转义
                        {{ sku.goods.desc|safe }}
                     <!--标签autoescape：设置一段代码都禁用转义，接受on、off参数
                     {% autoescape off %}
                     {{ sku.goods.desc|safe }}
                     {%endautoescape%} -->
                    </dd>
                </dl>
            </div>
            <div class="tab_content" id="tab_comment" style="display: none;">
                {% for order in orders %}
                <dl>
                    <dd>客户：{{ order.order.user.username }}&nbsp;&nbsp;&nbsp;时间：{{ order.order.create_time }}</dd>
                    <dt>{{ order.comment }}</dt>
                </dl>
                <hr/>
                {% endfor %}
            </div>

<script type="text/javascript" src="{% static ‘js/jquery-1.12.4.min.js‘ %}"></script>
<script type="text/javascript">

$("#tag_detail").click(function(){
      $("#tag_comment").removeClass("active");  //移除$("#tag_comment")  style里的active样式
      $(this).addClass("active");     //this代表:$("#tag_detail")  为this添加active样式
      $("#tab_comment").hide();    //hide:隐藏
      $("#tab_detail").show();     //show:展示
   });
$("#tag_comment").click(function(){
     $("#tag_detail").removeClass("active");  //移除$("#tag_detail") 在style里的active样式 类
     $(this).addClass("active");      //this代表:$("#tag_comment")  为this添加 active样式 类
     $("#tab_detail").hide();
     $("#tab_comment").show();
  });

<div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" id="num_show"  name="count" value="1">
                    <a href="javascript:;" class="add fr" id="add">+</a>
                    <a href="javascript:;" class="minus fr" id="minus">-</a> <!--minus:减去-->
                </div>
            </div>

$("#add").click(function(){
            var num_show = $("#num_show").val();
            <!-- parseInt:将字符串转换成整数 -->
            num_show = parseInt(num_show);
            num_show += 1;
            // 更新商品的总价
            $("#num_show").val(num_show);
            var price = $(".show_pirze>em").html();
            price = parseFloat(price);  <!--将字符串转换成浮点数-->
            var total = price * num_show;
            $(".total>em").html(total.toFixed(2));  //toFixed:保留小数  2:2位
        });
        {#  -----------         点击减少购买数量      --------------      #}
        $("#minus").click(function(){
            var num_show = $("#num_show").val();
            num_show = parseInt(num_show);
            num_show -= 1;
            if (num_show < 1){
                num_show = 1;
            }
            $("#num_show").val(num_show);
            var price = $(".show_pirze>em").html()
            price = parseFloat(price);
            var total = price * num_show;
            $(".total>em").html(total.toFixed(2));
        });

        // 手动输入商品的数量  blur：模糊
        $(‘.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()#}
            $("#num_show").val(count);
            var price = $(".show_pirze>em").html();
            price = parseFloat(price);  <!--将字符串转换成浮点数-->
            var total = price * count;
            $(".total>em").html(total.toFixed(2));
        });