zoukankan      html  css  js  c++  java
  • jQuery实现购物车数量的加减以及总价

      <!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>
      <title>jQuery实现购物车多物品数量的加减+总价计算</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
      <script>
      $(function(){
      $(".add").click(function(){
      var t=$(this).parent().find('input[class*=text_box]');
      t.val(parseInt(t.val())+1)
      setTotal();
      })
      $(".min").click(function(){
      var t=$(this).parent().find('input[class*=text_box]');
      t.val(parseInt(t.val())-1)
      if(parseInt(t.val())<0){
      t.val(0);
      }
      setTotal();
      })
      function setTotal(){
      var s=0;
      $("#tab td").each(function(){
      s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
      });
      $("#total").html(s.toFixed(2));
      }
      setTotal();
       
      })
      </script>
      </head>
      <body>
      <table id="tab">
      <tr>
      <td>
      <span>单价:</span><span class="price">1.50</span>
      <input class="min" name="" type="button" value="-" />
      <input class="text_box" name="" type="text" value="1" />
      <input class="add" name="" type="button" value="+" />
      </td>
      </tr>
      <tr>
      <td>
      <span>单价:</span><span class="price">3.95</span>
      <input class="min" name="" type="button" value="-" />
      <input class="text_box" name="" type="text" value="1" />
      <input class="add" name="" type="button" value="+" />
      </td>
      </tr>
      </table>
       
      <p>总价:<label id="total"></label></p>
      </body>
      </html>
  • 相关阅读:
    二叉树的遍历
    十进制与m进制的相互转化
    【素数】Prime Distance
    【数论】Sumdiv(整数的唯一分解定理+约束和公式+递归求等比)
    【错位+组合】排列计数
    【扩展欧几里得】青蛙的约会
    【归并排序+逆序数】poj-2299 Ultra-QuickSort
    【模拟】Sandglass
    【位运算】高效解决n皇后问题
    Popular Cows
  • 原文地址:https://www.cnblogs.com/xueyu-1/p/5640884.html
Copyright © 2011-2022 走看看