zoukankan      html  css  js  c++  java
  • 记实现一个功能

    功能:还未进入购物车时,底部有【共计:】,需要简单的计算进入购物车的货物一共价值多少钱

    背景:商品价格被加入了每个商品的【加入购物车按钮】的属性里  :     <p class="addToCarBtn" data-productid="402885de4e059ccd014e05b1c202000e" data-producttitle="森美非浓缩还原橙汁 1L" data-productcurrentcount="100" data-productprice="48.00" data-producttype="402885de4d7f0d15014d7f515e8e018e" data-productgdprice="40.00" data-storeproductfreight="0.00" data-amount="1" onclick="addCar(this);">加入购物车</p>

    初始实现思路:选中每个【加入购物车】按钮,遍历它们,点击它们时用this.attr('data-productprice')来获取他们的价格,然后加到一起(还没考虑到重复加入怎么避免),代码:  var a=[];    a=$('.addToCarBtn'); 遍历a ; a[i].click(function(){this.attr('data-productprice')})      

    初始结果: this总是不起作用,不清楚原因;

    最终实现思路:   每个商品【加入购物车按钮】里都加入了onclick="addCar(this);这个事件。这个事件的this是可以正确指向这个按钮的;addCar()如下:

    function addCar(obj){
        var productId = $(obj).attr("data-productId");
    
        var productType=$(obj).attr("data-productType");
        var productTitle = $(obj).attr("data-productTitle");
        var productCurrentCount = $(obj).attr("data-productCurrentCount");
        var productPrice = $(obj).attr("data-productPrice");
        var productGdprice=$(obj).attr("data-productGdprice");
        var storeProductFreight=$(obj).attr("data-storeProductFreight");
        var amount=$(obj).attr("data-amount");
        var proStr = productId + "|||" + productTitle + "|||" + productCurrentCount + "|||" + productPrice+ "|||" +productGdprice+ "|||" +storeProductFreight+ "|||" +amount;
        var proArray = new Array();
        var pro = {};
        var car = localStorage.getItem("car-" + communityId);
        productTypeArr.push(productType);
        sessionStorage.setItem('productTypeArray',productTypeArr);
    
        if(car == null || car.indexOf(productId) == -1){
            carNumber=parseFloat(productPrice)+parseFloat(carNumber);
            $('#carNumber').html('共计:'+carNumber+'元');
            if(car == null || car == ""){
                localStorage.setItem("car-" + communityId,proStr);
            }else{
                localStorage.setItem("car-" + communityId,car + "###" + proStr);
            }
            alert("加入购物车成功!");
        }else{
            alert("该商品已在购物车中!");
        }
    }

    其中使用 if(car == null || car.indexOf(productId) == -1) 就解决了重复加入的问题

    字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表示第二个字符依此类推)如果说没有找到则返回 -1。所以我们常常用这个方法来测试字符串中有没有这个字符串

    总结:1.给每个按钮绑定事件带this,比把每个按钮都选中,遍历绑时间好像要好用

            2.if(car == null || car.indexOf(productId) == -1) 解决重复加入问题

           3.parseFloat()从字符串到数字

  • 相关阅读:
    【记录】Mybatis-Generator 数据层代码生成器,自动生成dao类,mapper,pojo类
    【记录】logstash 的filter 使用
    【转载】windows 开启 nginx 监听80 端口 以及 禁用 http 服务后,无法重启 HTTP 服务,提示 系统错误 123,文件目录、卷标出错
    【报错】解决logstash tracking_column not found in dataset. {:tracking_column=>"updated_time"}问题
    【记录】elasticsearch 注解
    index read-only
    wget下载阿里云RDS备份集
    mysqlbinlog相关
    es安装elasticsearch-sql插件
    elastichd安装部署
  • 原文地址:https://www.cnblogs.com/xisitan/p/4726895.html
Copyright © 2011-2022 走看看