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> 
  • 相关阅读:
    将vue文件script代码抽取到单独的js文件
    git pull 提示错误:Your local changes to the following files would be overwritten by merge
    vue和uniapp 配置项目基础路径
    XAMPP Access forbidden! Access to the requested directory is only available from the local network.
    postman与newman集成
    postman生成代码段
    Curl命令
    POST方法的Content-type类型
    Selenium Grid 并行的Web测试
    pytorch转ONNX以及TnesorRT的坑
  • 原文地址:https://www.cnblogs.com/lin3615/p/3819155.html
Copyright © 2011-2022 走看看