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

前端JS如下:
<script type="text/javascript">
var proSkuData = '<?php echo $this->proSkus; ?>';
var itemPriceData = '<?php echo $this->itemPrices; ?>';
var proSkus = eval("("+proSkuData+")");
var itemPrice = eval("("+itemPriceData+")");
$(document).ready(function() { /*设置价格框*/
$("#quantity").numeral();
$("#quantity").keyup(SetPrice); /*每个sku按下去的函数*/
$(".size>li").click(function(){
var li = $(this);
li.parent().find("li").removeClass("sel");
li.addClass("sel");
$("#sku"+li.parent().attr("id")).val(li.attr("id"));
SetSkuPriceList();
}); /*设置默认sku*/
SetDefaultSku(); /*不显示loading图案*/
hideLoading(); }); function SetDefaultSku(){
var total = proSkus.length;
if( total>0 ){
for(var i=0;i<total;i++){
if(proSkus[i].is_default=="1"){
$("#"+proSkus[i].attr_id).find("li#"+proSkus[i].value_id).get(0).click();
}
}
}else{
/*该产品没有sku的情况下*/
$("#identifier").val('0');
SetPriceList();
}
} function SetSkuPriceList(){
/*
* 为了兼容老的程序,所以这里还是使用skuId[]数组存放信息 Quyan 2013/7/31
*/
var skus = $("[name='skuId[]']"); var arrCI = [];
var total = proSkus.length;
/*首先取出所有的sku,然后每个应用函数*/
skus.each(function(){
var attr_id = $(this).val(); /* skuId的值 */
var value_id = $("#sku"+attr_id).val(); /* valueId的值 */
if(arrCI.length==0){ /*如果arrCI为空,说明是第一次跑循环*/
for(var i=0;i<total;i++){
if( proSkus[i].attr_id == attr_id && proSkus[i].value_id == value_id ){
/*将临时的数据压入arrCI*/
arrCI.push(proSkus[i].combine_identifier);
}
}
/*alert(arrCI);*/
}else{/*里面已经有数据了,第二次及以上 */
var arrCI2 = [];
for(var i=0;i<total;i++){
if( proSkus[i].attr_id == attr_id && proSkus[i].value_id == value_id ){
/*判断arrCI中是否有该数据*/
if($.inArray(proSkus[i].combine_identifier, arrCI) >= 0)
arrCI2.push(proSkus[i].combine_identifier);
}
}
/*将arrCI2数据放入arrCI中*/
arrCI = arrCI2;
}
}); /*最后返回id的第一项*/
if (arrCI.length > 0){
var identifier = arrCI[0];
$("#identifier").val(identifier);
/*得到标示值,开始设置价格列表*/
SetPriceList();
}
} /*根据sku identifier设置价格列表*/
function SetPriceList(){
var identifier = $("#identifier").val();
/*从价格表中找出相关价格数据*/
var arrPrice = []; /*最低价、最高价*/
var minPrice = 99999, maxPrice = 0;
var minPricePiece = 99999, maxPricePiece = 0; var total = itemPrice.length;
for ( var i = 0; i < total; i++){
if(itemPrice[i].combine_identifier == identifier){
arrPrice.push(itemPrice[i]);
if(itemPrice[i].item_price < minPrice){
minPrice = itemPrice[i].item_price;
}
if(itemPrice[i].item_price > maxPrice){
maxPrice = itemPrice[i].item_price;
}
if(itemPrice[i].item_price_per_piece < minPricePiece){
minPricePiece = itemPrice[i].item_price_per_piece;
}
if(itemPrice[i].item_price_per_piece > maxPricePiece){
maxPricePiece = itemPrice[i].item_price_per_piece;
}
}
}
/*排序*/
arrPrice.sort(function(a,b){return a.price_identifier>b.price_identifier?1:-1});
/*输出html*/
var html = '<table cellpadding="5" cellspacing="1" border="0" class="mytable">'
+ '<tr><th>数量 <?php if($this->item['item_lots']>1){echo ' (lots)';}?></th><th>価格</th></tr>';
var total = arrPrice.length;
for ( var i=0; i< total; i ++){
if (arrPrice[i].max_quantity != "65535"){
html += '<tr><td>' + formatNumber(arrPrice[i].min_quantity) + ' - ' + formatNumber(arrPrice[i].max_quantity) + '</td>'
+ '<td>¥ ' + formatNumber(arrPrice[i].item_price) + '</td></tr>';
}else{
html += '<tr><td>' + formatNumber(arrPrice[i].min_quantity) + ' +</td>'
+ '<td>¥ ' + formatNumber(arrPrice[i].item_price) + '</td></tr>';
}
}
$("#priceInfo").html(html);
/*显示最低价、最高价*/
<?php if($this->item['item_lots']>1){?>
$(".price.fs16").html("¥ " + formatNumber(minPricePiece) + " ~ ¥ " + formatNumber(maxPricePiece) + " /piece");
<?php }else{ ?>
$(".price.fs16").html("¥ " + formatNumber(minPricePiece) + " ~ ¥ " + formatNumber(maxPricePiece) + " /<?php echo substr($this->item['item_quantity'],2); ?>");
<?php }?>
SetPrice(); } function SetPrice(){
var quantity = $("#quantity").val();
var identifier = $("#identifier").val();
if(!IsNum(quantity)){
alert('quantity error!');
form.quantity.focus();
}else{
var total = itemPrice.length;
for ( var i=0; i< total; i ++){
if (itemPrice[i].combine_identifier == identifier
&& parseInt(itemPrice[i].min_quantity) <= quantity && parseInt(itemPrice[i].max_quantity) >= quantity){
var item_price = itemPrice[i].item_price;
var total_price = item_price * quantity;
/*显示合计 */
$("#total_price").html("¥ " + formatNumber(total_price));
/*显示总计*/
var shipping_fee = parseInt($("#shippingFee").html()) * <?php echo $this->exchangeRate;?>; var grand_total = parseInt(total_price) + parseInt(shipping_fee);
$("#grand_total").html("¥ " + formatNumber(grand_total));
}
}
}
} function GetShippingFee(){
showLoading();
$.post("<?php echo $this->baseUrl('term/inquire'); ?>", {
"product_id": "<?php echo $this->escape($this->item['dhgate_item_id']); ?>",
"type": "get_shipping_fee",
"quantity": $("#quantity").val(),
"shipping_method": $("#shipping").val()
},
function(data){
if(data.success){
$("#shippingFee").val(data.shippingCost);
SetPrice();
}
hideLoading();
}, "json");
} function hideLoading(){
$("#loadingImg").hide();
} function showLoading(){
$("#loadingImg").show();
} </script>
大家看看,有没有什么可以优化的地方?
第一次写这么长的js的更多相关文章
- 第一次写博客,关于前端开发deMVC在js中的应用
对前端MVC MVC分别是model.view.controller的缩写,模型.视图.控制器.这些更加偏向于后台,在以前MVC是只属于后台的.当然随着技术的进步,前端的大牛们将后台的一些东西应用于前 ...
- 第一次写博客Poj1044
Date bugs Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3005 Accepted: 889 Descript ...
- 第一次写python爬虫
花了4天终于把写完了把国内的几个漏洞平台爬完了,第一次写py,之前一直都在说学习,然后这周任务是把国内的漏洞信息爬取一下.花了1天学PY,剩下的1天一个.期间学习到了很多.总结如下: ======== ...
- [改善Java代码]覆写变长方法也循规蹈矩
建议6:覆写变长方法也循规蹈矩 在Java中,子类覆写父类中的方法很常见,这样做既可以修正Bug也可以提供扩展的业务功能支持,同时还符合开闭原则(Open-Closed Principle),我们来看 ...
- Java第一次写的流布局图形界面,留个纪念
package jisuanqi; import java.awt.*; public class MyFrame extends Frame{ //继承Frame类 public MyFrame() ...
- HDU 2064 菜鸡第一次写博客
果然集训就是学长学姐天天传授水铜的动态规划和搜索,今天讲DP由于困意加上面瘫学长"听不懂就是你不行"的呵呵传授,全程梦游.最后面对连入门都算不上的几道动态规划,我的内心一片宁静,甚 ...
- CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- 第一次写的MySQLHelper
一. 第一次写MysqlHelper,用来管理城市的数据库 二.MySQLHelper源代码 using MySql.Data.MySqlClient; using System; using Sys ...
- 今天我自己第一次写了一个Windows批处理bat脚本,一起学习一下吧。
今天我自己第一次写了一个Windows批处理bat脚本,备注一下 事情原由:自己使用Java开发了一个加解密的工具.但是当把工具给别人使用的时候,别人还需要把代码编译打包, 然后还需要看一下代码里面的 ...
随机推荐
- .NET 二维码生成(ThoughtWorks.QRCode)
引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...
- crontab安装和用法(定时任务)
crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...
- 转:ibatis动态sql
转:ibatis动态sql 直接使用JDBC一个非常普遍的问题就是动态SQL.使用参数值.参数本身和数据列都是动态SQL,通常是非常困难的.典型的解决办法就是用上一堆的 IF-ELSE条件语句和一连串 ...
- bzoj4511:[Usaco2016 Jan]Subsequences Summing to Sevens
题目大意:给个序列,求最长的连续子序列使其为7的倍数 又是一道令人欢喜的不用怎么用脑的水题.. 边读入,边计算前缀和 分别保存前缀和%7结果为1,2,3,4,5,6的第一次的位置 然后减一减就知道长度 ...
- Ecshop:后台添加新功能栏目以及管理权限设置
一.添加菜单项 打开 /admin/includes/inc_menu.php文件(后台框架左边菜单),在最后添加一行如下: $modules['17_other_menu']['sns_list'] ...
- 实战Java虚拟机之四:提升性能,禁用System.gc() ?
今天开始实战Java虚拟机之四:"禁用System.gc()". 总计有5个系列 实战Java虚拟机之一“堆溢出处理” 实战Java虚拟机之二“虚拟机的工作模式” 实战Java虚拟 ...
- 你听说过哪些坑人 or 赚钱的歪点子?真是骗局太多,傻子都不够用啊!
又到了骗术揭秘时间了.各位看客您扶稳做好了,来给你深扒一些行业内幕了. 或者说一些投机的思路. 先提前写一些字,相信你们一会评论时候会用的上.直接复制,比较省力. “这年头傻逼太多,骗子明显不够用啊. ...
- Oracle12c IMO 测试
1.概述 2014 年 6 月,在 Oracle 12c 的 12.1.0.2 版本中,Oracle 正式发布和引入了基于内存和列式计算的 In-Memory Option 组件 (以下简称 IMO) ...
- 关于页面中table中相同的列自动合并
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- python+selenium生成测试报告后自动发送邮件
标签(空格分隔): 自动化测试 运行自动化脚本后,会产生测试报告,而将测试报告自动发送给相关人员,能够让对方及时的了解测试情况,查看测试结果. 整个脚本包括三个部分: 生成测试报告 获取最新的测试报告 ...