第一次写这么长的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>¥ ' + formatNumber(arrPrice[i].item_price) + '</td></tr>'; 126 }else{ 127 html += '<tr><td>' + formatNumber(arrPrice[i].min_quantity) + ' +</td>' 128 + '<td>¥ ' + 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("¥ " + formatNumber(minPricePiece) + " ~ ¥ " + formatNumber(maxPricePiece) + " /piece"); 135 <?php }else{ ?> 136 $(".price.fs16").html("¥ " + formatNumber(minPricePiece) + " ~ ¥ " + formatNumber(maxPricePiece) + " /<?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("¥ " + 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("¥ " + 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>
大家看看,有没有什么可以优化的地方?
作者:thanks
微信:-
QQ:305380844
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。