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

  • Z时代
  • 2024-01-10
  • 分类：综合

python

这鸟样：

类似于这样：

<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));
        });
以上是 python3之天天生鲜详情页商品详情展示以及商品数量变化 的全部内容，
                        来源链接：
                            utcz.com/z/531124.html
回到顶部