zoukankan      html  css  js  c++  java
  • 第一次写这么长的js

    是公司一个项目,要求显示不同的sku,然后根据sku组合显示不同的价格区间,根据填写的数量落在哪个价格区间,然后进行计算。实际截图如下:

    前端JS如下:

      1 <script type="text/javascript">
      2 var proSkuData = '<?php echo $this->proSkus; ?>';
      3 var itemPriceData = '<?php echo $this->itemPrices; ?>';
      4 var proSkus = eval("("+proSkuData+")");
      5 var itemPrice = eval("("+itemPriceData+")");
      6 $(document).ready(function() {
      7 
      8     /*设置价格框*/
      9     $("#quantity").numeral();
     10     $("#quantity").keyup(SetPrice);
     11 
     12     /*每个sku按下去的函数*/
     13     $(".size>li").click(function(){
     14         var li = $(this);
     15         li.parent().find("li").removeClass("sel");
     16         li.addClass("sel");
     17         $("#sku"+li.parent().attr("id")).val(li.attr("id"));
     18         SetSkuPriceList();
     19     });
     20 
     21     /*设置默认sku*/
     22     SetDefaultSku();
     23 
     24     /*不显示loading图案*/
     25     hideLoading();
     26 
     27 });
     28 
     29 function SetDefaultSku(){
     30     var total = proSkus.length;
     31     if( total>0 ){
     32         for(var i=0;i<total;i++){
     33             if(proSkus[i].is_default=="1"){
     34                 $("#"+proSkus[i].attr_id).find("li#"+proSkus[i].value_id).get(0).click();
     35             }
     36         }
     37     }else{
     38         /*该产品没有sku的情况下*/
     39         $("#identifier").val('0');
     40         SetPriceList();
     41     }
     42 }
     43 
     44 function SetSkuPriceList(){
     45     /*
     46     *    为了兼容老的程序,所以这里还是使用skuId[]数组存放信息 Quyan 2013/7/31
     47     */
     48     var skus = $("[name='skuId[]']");
     49 
     50     var arrCI = [];
     51     var total = proSkus.length;
     52     /*首先取出所有的sku,然后每个应用函数*/
     53     skus.each(function(){
     54         var attr_id = $(this).val(); /* skuId的值 */
     55         var value_id = $("#sku"+attr_id).val(); /* valueId的值 */
     56         if(arrCI.length==0){ /*如果arrCI为空,说明是第一次跑循环*/
     57             for(var i=0;i<total;i++){
     58                 if( proSkus[i].attr_id == attr_id && proSkus[i].value_id == value_id ){
     59                     /*将临时的数据压入arrCI*/
     60                     arrCI.push(proSkus[i].combine_identifier);
     61                 }
     62             }
     63         /*alert(arrCI);*/
     64         }else{/*里面已经有数据了,第二次及以上 */
     65             var arrCI2 = [];
     66             for(var i=0;i<total;i++){
     67                 if( proSkus[i].attr_id == attr_id && proSkus[i].value_id == value_id ){
     68                     /*判断arrCI中是否有该数据*/
     69                     if($.inArray(proSkus[i].combine_identifier, arrCI) >= 0)
     70                     arrCI2.push(proSkus[i].combine_identifier);
     71                 }
     72             }
     73             /*将arrCI2数据放入arrCI中*/
     74             arrCI = arrCI2;
     75         }
     76     });
     77 
     78     
     79     /*最后返回id的第一项*/
     80     if (arrCI.length > 0){
     81         var identifier = arrCI[0];
     82         $("#identifier").val(identifier);
     83         /*得到标示值,开始设置价格列表*/
     84         SetPriceList();
     85     }
     86 }
     87 
     88 /*根据sku identifier设置价格列表*/
     89 function SetPriceList(){
     90     var identifier = $("#identifier").val();
     91     /*从价格表中找出相关价格数据*/
     92     var arrPrice = [];
     93 
     94     /*最低价、最高价*/
     95     var minPrice = 99999, maxPrice = 0;
     96     var minPricePiece = 99999, maxPricePiece = 0; 
     97 
     98     var total = itemPrice.length;
     99     for ( var i = 0; i < total; i++){
    100         if(itemPrice[i].combine_identifier == identifier){
    101             arrPrice.push(itemPrice[i]);
    102             if(itemPrice[i].item_price < minPrice){
    103                 minPrice = itemPrice[i].item_price;
    104             }
    105             if(itemPrice[i].item_price > maxPrice){
    106                 maxPrice = itemPrice[i].item_price;
    107             }
    108             if(itemPrice[i].item_price_per_piece < minPricePiece){
    109                 minPricePiece = itemPrice[i].item_price_per_piece;
    110             }
    111             if(itemPrice[i].item_price_per_piece > maxPricePiece){
    112                 maxPricePiece = itemPrice[i].item_price_per_piece;
    113             }
    114         }
    115     }
    116     /*排序*/
    117     arrPrice.sort(function(a,b){return a.price_identifier>b.price_identifier?1:-1});
    118     /*输出html*/
    119     var html = '<table cellpadding="5" cellspacing="1" border="0" class="mytable">'
    120         + '<tr><th>数量 <?php if($this->item['item_lots']>1){echo ' (lots)';}?></th><th>価格</th></tr>';
    121     var total = arrPrice.length;
    122     for ( var i=0; i< total; i ++){
    123         if (arrPrice[i].max_quantity != "65535"){
    124             html += '<tr><td>' + formatNumber(arrPrice[i].min_quantity) + ' - ' + formatNumber(arrPrice[i].max_quantity) + '</td>' 
    125             + '<td>&yen&nbsp;' +  formatNumber(arrPrice[i].item_price) + '</td></tr>';
    126         }else{
    127             html += '<tr><td>' + formatNumber(arrPrice[i].min_quantity) + ' +</td>' 
    128             + '<td>&yen&nbsp;' +  formatNumber(arrPrice[i].item_price) + '</td></tr>';
    129         }
    130     }
    131     $("#priceInfo").html(html);
    132     /*显示最低价、最高价*/
    133     <?php if($this->item['item_lots']>1){?>
    134         $(".price.fs16").html("&yen&nbsp; " + formatNumber(minPricePiece) + "&nbsp;~&nbsp;&yen&nbsp; " + formatNumber(maxPricePiece) + "&nbsp;/piece");
    135     <?php }else{ ?>
    136         $(".price.fs16").html("&yen&nbsp; " + formatNumber(minPricePiece) + "&nbsp;~&nbsp;&yen&nbsp; " + formatNumber(maxPricePiece) + "&nbsp;/<?php echo substr($this->item['item_quantity'],2); ?>");
    137     <?php }?>
    138     SetPrice();
    139     
    140 }
    141 
    142 
    143 function SetPrice(){
    144     var quantity = $("#quantity").val();
    145     var identifier = $("#identifier").val();
    146     if(!IsNum(quantity)){
    147         alert('quantity error!');
    148         form.quantity.focus(); 
    149     }else{
    150         var total = itemPrice.length;
    151         for ( var i=0; i< total; i ++){
    152             if (itemPrice[i].combine_identifier == identifier 
    153             && parseInt(itemPrice[i].min_quantity) <= quantity && parseInt(itemPrice[i].max_quantity) >= quantity){
    154                 var item_price = itemPrice[i].item_price;
    155                 var total_price = item_price * quantity;
    156                 /*显示合计 */
    157                 $("#total_price").html("&yen&nbsp;" + formatNumber(total_price));
    158                 /*显示总计*/
    159                 var shipping_fee = parseInt($("#shippingFee").html()) * <?php echo $this->exchangeRate;?>;
    160                 
    161                 var grand_total = parseInt(total_price) + parseInt(shipping_fee);
    162                 $("#grand_total").html("&yen&nbsp;" + formatNumber(grand_total));
    163             }
    164         }
    165     }
    166 }
    167 
    168 function GetShippingFee(){
    169     showLoading();
    170     $.post("<?php echo $this->baseUrl('term/inquire'); ?>", { 
    171         "product_id": "<?php echo $this->escape($this->item['dhgate_item_id']); ?>",
    172         "type": "get_shipping_fee",
    173         "quantity": $("#quantity").val(),
    174         "shipping_method": $("#shipping").val()
    175         }, 
    176         function(data){
    177             if(data.success){
    178                 $("#shippingFee").val(data.shippingCost);
    179                 SetPrice();
    180             }
    181             hideLoading();
    182         }, "json");
    183 }
    184 
    185 function hideLoading(){
    186     $("#loadingImg").hide();
    187 }
    188 
    189 function showLoading(){
    190     $("#loadingImg").show();
    191 }
    192 
    193 </script>

    大家看看,有没有什么可以优化的地方?

  • 相关阅读:
    超强视频分割/剪辑软件:Ultra Video Splitter绿色便携版
    PAZU 4Fang WEB 打印控件
    PHP开源网站
    jQuery实现点击小图显示大图效果
    博观而约取,厚积而薄发
    jquery两边飘浮的对联广告
    图片或文字循环滚动JS代码收集
    降低站长成本 推荐8个免费或低廉小型建站工具
    市净率
    浅谈策略交易、系统交易和程式交易
  • 原文地址:https://www.cnblogs.com/thanks/p/3232298.html
Copyright © 2011-2022 走看看