zoukankan      html  css  js  c++  java
  • jQuery实现购物车多物品数量的加减+总价+删除计算

     <?php
    session_start();
     ?>
     <!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"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head> 
    <title>jQuery实现购物车多物品数量的加减+总价+删除计算</title> 
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
    <script> 
    $(function(){ 
        var _url = $('#siteurl').val();
        $('.delete').click(function(){
          var t=$(this).parent('td').parent('tr');
          var tt=$(this).parent('td').find('input[class*=text_box]');
          tt.val(0);
            
    
          setTotal();
          t.hide();
        });
    
        $(".add").click(function(){ 
            var t=$(this).parent('td').find('input[class*=text_box]'); 
            t.val(parseInt(t.val())+1); 
            setTotal(); 
        }); 
    
        $(".min").click(function(){ 
            var t=$(this).parent('td').find('input[class*=text_box]'); 
            t.val(parseInt(t.val())-1) 
            if(parseInt(t.val())<1){ 
                t.val(1); 
            } 
    
        setTotal(); 
      });
    
      $('.text_box').keyup(function(){
        setTotal();
      });
      
      function setTotal(){ 
        var s=0; 
        $("#tab td").each(function(){ 
          var numbers = parseInt($(this).find('input[class*=text_box]').val());
          if($.isNumeric(numbers))
          {
                numbers = parseInt(numbers);
          }else
         {
            numbers = 0;
         }
          $(this).find('input[class*=text_box]').val(numbers);
          s += numbers*parseFloat($(this).find('span[class*=price]').text()); 
    
            // bof 用ajax在_url中删除指定的购物车中$_SESSION相关信息
            var pid =$(this).find('input[class*=product_id]');
            $.ajax({
                url:_url,
          type: 'post',
                data:{proid : pid.val()},
                success: function(data){ 
                    // 回应    
                }
            }); 
            // end
        }); 
        $("#total").html(s.toFixed(2)); 
      } 
     // setTotal(); 
    
    }); 
    </script> 
    </head> 
    <body> 
    <form action="./myform.php" method="post">
    <input type="hidden" name="siteUrl" id="siteurl" value="siteUrl.php" />
    <table id="tab"> 
    <tr> 
    <td> 
    <span>单价:</span><span class="price">1.50</span> 
    <input class="product_id" type="hidden" name="product_id" value="value" />
    <input class="min" name="" type="button" value="-" /> 
    <input class="text_box" name="name2" type="text" value="1" /> 
    <input class="add" name="" type="button" value="+" /> 
    <a href="javascript:void(0);" class="delete">删除</a>
    </td> 
    </tr> 
    <tr> 
    <td> 
    <span>单价:</span><span class="price">3.95</span> 
    <input class="min" name="" type="button" value="-" /> 
    <input class="text_box" name="name1" type="text" value="1" /> 
    <input class="add" name="" type="button" value="+" /> 
    <a href="javascript:void(0);" class="delete">删除</a>
    </td> 
    </tr> 
    </table> 
    <input type="submit" name="submit" value="submit" />
    </form>
     总价:<label id="total"></label>  
     <div id="product_id_value"><?php print_r($_SESSION); ?></div>
    </body> 
    </html> 
  • 相关阅读:
    js 删除数组的某一项或者几项的方法
    JavaScript 面向对象的程序设计(一)之理解对象属性
    iview 之 穿梭框 transfer
    iview2.0 bug之+8 区的 DatePicker
    js Object.keys 用法
    js map 、filter 、forEach 、every、some 的用法
    iview tree 之如何获取已勾选的节点
    js 中常见的深拷贝的方法
    ES6新特性
    Amazon2014在线笔试 第三题
  • 原文地址:https://www.cnblogs.com/lin3615/p/3819155.html
Copyright © 2011-2022 走看看