如图：
需求：会根据颜色展示对应的尺寸、根据颜色尺寸展示对应的价格
代码如下：
<!DOCTYPE html> <html> <head> <meta name="description" content="必要C2M商城是全球性价比最高的电子商务平台，是全球第一家用户直连制造（Customer To Manufactory）的平台，通过平台建立消费者与品质制造商的桥梁，将消费者的需求直接发送到工厂，按需生产模式既满足了消费者个性化的需求，又短路了复杂的商品流通环节，真正让消费者享受到专属且高品质的商品。目前，商品覆盖高跟鞋、眼镜、饰品、运动鞋、运动服、女士包包等品类，未来会按照消费者需求来增加新的产品类目。"/> <meta name="Keywords" content="必要;必要商城;必要平台;必要电商;C2M商城;工业4.0;定制平台;定制商城;奢侈品定制;定制鞋;定制包;定制眼镜;定制饰品;定制运动服;定制运动鞋" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta property="qc:admins" content="35713343766211176375747716" /> <title> </title> <link href="__STATIC__/front/pc/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="__STATIC__/front/pc/favicon.ico" rel="icon" type="image/x-icon" /> <script type="text/javascript"> window.ApiSite = "http://api.biyao.com"; window.ControllerSite=""; window.loginUserId=2444809; window.version="2015010131708";//给外链js设置版本号 window.__pageType="other"; if (window.loginUserId!=""){ window.WebIMSite="http://webim.idstaff.com"; } else { window.WebIMSite="http://webim.idstaff.com"; } </script> <script type="text/javascript"> window.designData = {"carveInfo":null,"imgList":[{"img_l":"http://img.biyao.com/files/temp/f9/f91a43f5ea026261.jpg","img_s":"http://img.biyao.com/files/temp/f9/f91a43f5ea026261.jpg"},{"img_l":"http://img.biyao.com/files/temp/96/960ba7d0ca35c582.jpg","img_s":"http://img.biyao.com/files/temp/96/960ba7d0ca35c582.jpg"},{"img_l":"http://img.biyao.com/files/temp/31/3186a35bbe2c7733.jpg","img_s":"http://img.biyao.com/files/temp/31/3186a35bbe2c7733.jpg"},{"img_l":"http://img.biyao.com/files/temp/11/1125bf3b2c225d07.jpg","img_s":"http://img.biyao.com/files/temp/11/1125bf3b2c225d07.jpg"}],"isCarve":0,"productDetail":"<p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053467923974311_0.jpg\" style=\"\" title=\"罗马壶详情图1200_01.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469125395380_0.jpg\" style=\"\" title=\"罗马壶详情图1200_02.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468031302499_0.jpg\" style=\"\" title=\"罗马壶详情图1200_03.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469230383564_0.jpg\" style=\"\" title=\"罗马壶详情图1200_04.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468161260728_0.jpg\" style=\"\" title=\"罗马壶详情图1200_05.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469352999779_0.jpg\" style=\"\" title=\"罗马壶详情图1200_06.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/29/08/productiondetail/data/192168100161_4280_636053776523155295_0.jpg\" style=\"\" title=\"lm-pc.jpg\" alt=\"lm-pc.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469465007976_0.jpg\" style=\"\" title=\"罗马壶详情图1200_08.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468404933156_0.jpg\" style=\"\" title=\"罗马壶详情图1200_09.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468462029256_0.jpg\" style=\"\" title=\"罗马壶详情图1200_10.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468551729414_0.jpg\" style=\"\" title=\"罗马壶详情图1200_11.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468601337501_0.jpg\" style=\"\" title=\"罗马壶详情图1200_12.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468676373633_0.jpg\" style=\"\" title=\"罗马壶详情图1200_13.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468756713774_0.jpg\" style=\"\" title=\"罗马壶详情图1200_14.jpg\"/><\/p><p><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469960776847_0.jpg\" style=\"\" title=\"罗马壶详情图1200_15.jpg\"/><\/p><p><br/><\/p>","productId":"1301025001","productMdetail":"<p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053470359357547_0.jpg\" style=\"\" title=\"罗马壶详情图640_01.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053470397889615_0.jpg\" style=\"\" title=\"罗马壶详情图640_02.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/29/08/productiondetail/data/192168100161_4280_636053777277416620_0.jpg\" style=\"\" title=\"lmh-m.jpg\" alt=\"lmh-m.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053469327986777_0.jpg\" style=\"\" title=\"罗马壶详情图640_04.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053470529397846_0.jpg\" style=\"\" title=\"罗马壶详情图640_05.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053469495687072_0.jpg\" style=\"\" title=\"wap端-01_01.jpg\"/><\/p><p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053470688362125_0.png\" style=\"\" title=\"wap端-01_02.png\"/><\/p><p><br/><\/p>","productSale":"长效保温，欧式设计，奥氏体304不锈钢","shelfStatus":1,"sizeDetail":[{"duration":10,"price":119,"shelfStatus":1,"sizeDetail":null,"specs":[{"goods_size":"波尔多红","name":"颜色"},{"goods_size":"2升","name":"尺寸"}],"storeNum":100,"suId":"1301025001010200001","suName":"经典北欧系列奥氏体真空保温壶"},{"duration":10,"price":119,"shelfStatus":1,"sizeDetail":null,"specs":[{"goods_size":"亮银色","name":"颜色"},{"goods_size":"2升","name":"尺寸"}],"storeNum":100,"suId":"1301025001060200001","suName":"经典北欧系列奥氏体真空保温壶"}],"sizeList":[{"des":"波尔多红","img_l":null,"img_s":null,"name":"颜色","spec_id":2587,"type":0},{"des":"亮银色","img_l":null,"img_s":null,"name":"颜色","spec_id":2588,"type":0},{"des":"2升","img_l":null,"img_s":null,"name":"尺寸","spec_id":2589,"type":0}],"suData":{"duration":10,"price":119,"shelfStatus":1,"sizeDetail":"http://img.biyao.com/files/temp/d2/d2d1453df6275eb6.jpg","specs":[{"goods_size":"亮银色","name":"颜色"},{"goods_size":"2升","name":"尺寸"}],"storeNum":332,"suId":"1301025001060200001","suName":"经典北欧系列奥氏体真空保温壶"},"supplierInfo":{"_OEM_info":"","_ServicesTel":"400-869-9663","_StoreDesc":"STRAFORD常年服务于膳魔师、双立人、WMF等众多国际一线品牌，是国内最大的不锈钢保温产品制造商之一，拥有国际领先的双层抽真空技术，以及众多产品外观设计专利，拥有十多年国际知名品牌生产经验，致力于为全球家庭用户提供设计简洁、时尚耐用、健康环保的不锈钢产品，力求为每一个家庭带来舒适优越的生活体验！","_TransferDelayDay":null,"_company_name":null,"_contract_deadline":"2016-07-25 15:27:38.837","_createby":"10032","_createtime":"2016-07-25","_enable":true,"_id":74,"_logo_url":"http://img.biyao.com/files/data0/2016/07/28/18/storelogo/abc1e9e4624ca14e.jpg","_logoid":0,"_service_tel":null,"_service_time":"周一至周日9:00-21:00","_settled_time":"2016-07-25","_status":1,"_store_domain_name":"straford.biyao.com","_store_location":null,"_store_logo_url":"","_store_name":"STRAFORD水具","_supplier_factory_name":null,"_supplier_id":130102,"_updateby":"10032","_updatetime":"2016-07-29","is_webim":0,"is_zcwebim":0,"policy":[{"policyDescription":"实物破损、不符、质量问题，退换货商家承担往返运费。","policyId":3,"policyName":"7天无忧退换","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"争议可申诉，申诉成功，立即退款。","policyId":4,"policyName":"先行赔付","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"未按承诺时间发货，系统自动赔付（赔款金额为订单商品金额的30%，上限500元）。","policyId":5,"policyName":"超时赔偿","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"运费由商家承担","policyId":9,"policyName":"顺丰包邮","supplierId":130102,"supplierName":"STRAFORD水具"}],"policyDescription":"<p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/20/productiondetail/data/192168100162_8940_636053362990299999_0.jpg\" title=\"wb端-01.jpg\" alt=\"wb端-01.jpg\"/><\/p>","productGrade":5,"productNum":0,"publicityImgList":null,"qualityGrade":5,"return_address":null,"return_phone":null,"return_receiver":null,"return_zipcode":null,"serviceGrade":5,"zcgroupid":""}}; window.categoryID=509; designData.ModelId=designData.productId; window.isCarveCustomer=0;//顾客刻字状态 window.CarveContent="";//刻字内容 window.supplierInfo={"_OEM_info":"","_ServicesTel":"400-869-9663","_StoreDesc":"STRAFORD常年服务于膳魔师、双立人、WMF等众多国际一线品牌，是国内最大的不锈钢保温产品制造商之一，拥有国际领先的双层抽真空技术，以及众多产品外观设计专利，拥有十多年国际知名品牌生产经验，致力于为全球家庭用户提供设计简洁、时尚耐用、健康环保的不锈钢产品，力求为每一个家庭带来舒适优越的生活体验！","_TransferDelayDay":null,"_company_name":null,"_contract_deadline":"2016-07-25 15:27:38.837","_createby":"10032","_createtime":"2016-07-25","_enable":true,"_id":74,"_logo_url":"http://img.biyao.com/files/data0/2016/07/28/18/storelogo/abc1e9e4624ca14e.jpg","_logoid":0,"_service_tel":null,"_service_time":"周一至周日9:00-21:00","_settled_time":"2016-07-25","_status":1,"_store_domain_name":"straford.biyao.com","_store_location":null,"_store_logo_url":"","_store_name":"STRAFORD水具","_supplier_factory_name":null,"_supplier_id":130102,"_updateby":"10032","_updatetime":"2016-07-29","is_webim":0,"is_zcwebim":0,"policy":[{"policyDescription":"实物破损、不符、质量问题，退换货商家承担往返运费。","policyId":3,"policyName":"7天无忧退换","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"争议可申诉，申诉成功，立即退款。","policyId":4,"policyName":"先行赔付","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"未按承诺时间发货，系统自动赔付（赔款金额为订单商品金额的30%，上限500元）。","policyId":5,"policyName":"超时赔偿","supplierId":130102,"supplierName":"STRAFORD水具"},{"policyDescription":"运费由商家承担","policyId":9,"policyName":"顺丰包邮","supplierId":130102,"supplierName":"STRAFORD水具"}],"policyDescription":"<p style=\"text-align: center;\"><img src=\"http://img.biyao.com/files/data0/2016/07/28/20/productiondetail/data/192168100162_8940_636053362990299999_0.jpg\" title=\"wb端-01.jpg\" alt=\"wb端-01.jpg\"/><\/p>","productGrade":5,"productNum":0,"publicityImgList":null,"qualityGrade":5,"return_address":null,"return_phone":null,"return_receiver":null,"return_zipcode":null,"serviceGrade":5,"zcgroupid":""}; window.ControllerSite = ''; </script> <link href="__STATIC__/front/pc/common/css/common.css?v=biyao_1227846" rel="stylesheet" /> <link href="__STATIC__/front/pc/www/css/cm_www.css?v=biyao_3f1d92e" rel="stylesheet" /> <script type="text/javascript"></script> <link type="text/css" href="__STATIC__/front/pc/www/css/editor_by.css?v=biyao_a7abbbd" rel="stylesheet" /> <link type="text/css" href="__STATIC__/front/pc/www/cssnew/noModel.css?v=biyao_6a5d800" rel="stylesheet" /><script type="text/javascript" src="__STATIC__/front/pc/common/js/lazyload.js?v=biyao_80d4f78"></script> <script type="text/javascript" src="__STATIC__/front/pc/www/js/product/lazyloadIM.js?v=biyao_2f2a448"></script> </head> <body id="pagebody"> <div class="pub_nav topBanner slideUp"> <div class="wrap clearfix bg_333"> <div class="f_l"> <ul class="pub_nav_list sizeZero"> <li class="inline"><a href="index.html">首页</a><span class="bg"></span></li> <li class="inline"><a href="sjzx.html">商家中心</a><span class="bg"></span></li> <li class="inline"><a href="sjzx.html">平台政策</a><span class="bg"></span></li> <!-- <li class="inline last"><a href="list.html#complaint/toAddComplaint">非法信息投诉</a><span class="bg"></span></li> --> <li class="inline last newapp"> <a href="#">必要手机版</a> <div class="app_box"> <span class="inline upArre"></span> <div class="con"> <p class="sj_evm"></p> <p class="lineH24 col_666 f14">必要手机版</p> </div> </div> </li> </ul> </div> <div class="f_r"> <ul class="pub_nav_list sizeZero"> <li class="inline"> <a class="login" href="MyOrder.html"> Hi,by_3444810 </a> <a class="regist mg_l10" href="/account/logout">[ 退出 ]</a> <span class="bg"></span> </li> <li class="inline last"> <a href="javascript:void(0);" class="">个人中心<i class="inline pep_bg mg_l10"></i></a> <div class="app_box"> <span class="inline upArre"></span> <div class="bg_fff down_list_box"> <a class="inline" href="MyOrder.html">我的订单</a> <a class="inline" href="Profile.html">个人设置</a> </div> </div> </li> <li class="inline last pd_r0 shopping_cart vTop"> <a class="inline sizeZero" href="shopcars.html"> <i class="inline"></i> <span id="shopcarNumID" class="inline">购物车 0</span> </a> </li> </ul> </div> </div> </div> <div class="index_bg_fff"> <div class="wrap pub_logo_box clearfix"> <div class="pub_logo f_l"><a href="/home/index.html"><img alt="" src="__STATIC__/front/pc/common/img/logo.png?v=biyao_4637d54"></a></div> <div class="f_r"> <ul class="sizeZero menu_nav_list"> <li class="inline "> <a href="javascript:;">眼镜</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#/man/index.html?f_upd=fc-27" class="escp ">男士</a> <a href="list.html#/women/index.html?f_upd=fc-28" class="escp last">女士</a> </div> </li> <li class="inline "> <a href="javascript:;">男装</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#/socks/index.html?f_upd=fc-278" class="escp ">RZLZL袜子</a> <a href="list.html#polo/index.html?f_upd=fc-237" class="escp ">亓口男装</a> <a href="list.html#belt/index.html?f_upd=fc-223" class="escp ">皮具</a> <a href="list.html#mknitwear/index.html?f_upd=fc-214" class="escp ">针织短T</a> <a href="product.html#/1300590001010100001-0.html?f_upd=fc-137" class="escp ">内裤</a> <a href="list.html#man/index.html?f_upd=fc-161" class="escp ">G＆M男装</a> <a href="list.html#man/index.html?f_upd=fc-164" class="escp ">G&M商务长裤</a> <a href="list.html#jeans/index.html?f_upd=fc-116" class="escp ">牛仔</a> <a href="list.html#man/index.html?f_upd=fc-122" class="escp last">GCMT POLO衫</a> </div> </li> <li class="inline "> <a href="javascript:;">户外</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#man/index.html?f_upd=fc-258" class="escp ">RC男士户外服</a> <a href="list.html#women/index.html?f_upd=fc-257" class="escp ">RC女士户外服</a> <a href="list.html#outside/index.html?f_upd=fc-224" class="escp last">户外鞋</a> </div> </li> <li class="inline "> <a href="javascript:;">运动</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#shoes/index.html?f_upd=fc-111" class="escp last">运动休闲鞋</a> </div> </li> <li class="inline "> <a href="javascript:;">鞋靴</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#menshoes/index.html?f_upd=fc-44" class="escp ">VIZ男鞋</a> <a href="list.html#womenshoes/index.html?f_upd=fc-45" class="escp ">C&M女鞋</a> <a href="list.html#womenshoes/index.html?f_upd=fc-232" class="escp last">VIZ女鞋</a> </div> </li> <li class="inline "> <a href="javascript:;">个人护理</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="product.html#/1300515002130000001-0.html?f_upd=fc-264" class="escp ">电动牙刷</a> <a href="list.html#shaver/index.html?f_upd=fc-110" class="escp ">男士剃须刀</a> <a href="product.html#/1300510001000000010-0.html?f_upd=fc-222" class="escp last">女士刮毛刀</a> </div> </li> <li class="inline "> <a href="javascript:;">箱包</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="product.html#/1300895007050000001-0.html?f_upd=fc-265" class="escp ">RC双肩包</a> <a href="list.html#backpack/index.html?f_upd=fc-218" class="escp ">stayalive双肩包</a> <a href="list.html#backpack/index.html?f_upd=fc-66" class="escp ">airleaf箱包</a> <a href="list.html#suitcase/index.html?f_upd=fc-148" class="escp last">GRIFFIN LAND拉杆箱</a> </div> </li> <li class="inline "> <a href="javascript:;">女装</a> <div class="sub_nav_list pos_pub"> <span class="sub_nav_jd"></span> <a href="list.html#/socks/index.html?f_upd=fc-279" class="escp ">RZLZL袜子</a> <a href="list.html#women/index.html?f_upd=fc-268" class="escp ">春风女装</a> <a href="list.html#jeanswomen/index.html?f_upd=fc-206" class="escp ">牛仔</a> <a href="list.html#skirt/index.html?f_upd=fc-204" class="escp ">女裙</a> <a href="list.html#knitwear/index.html?f_upd=fc-215" class="escp ">针织短T</a> <a href="list.html#women/index.html?f_upd=fc-205" class="escp ">POLO衫</a> <a href="list.html#women/index.html?f_upd=fc-203" class="escp ">婚纱礼服</a> <a href="list.html#children/index.html?f_upd=fc-261" class="escp ">儿童公主裙</a> <a href="list.html#scarf/index.html?f_upd=fc-221" class="escp ">围巾</a> <a href="list.html#women/index.html?f_upd=fc-246" class="escp last">内衣</a> </div> </li> <li class="inline last"> <a href="javascript:;">家居生活</a> <div class="sub_nav_list pos_pub_last"> <span class="sub_nav_jd"></span> <a href="http://straford.biyao.com/kettle/index.html?f_upd=fc-282" class="escp ">STRAFORD水具</a> <a href="list.html#kitchen/index.html?f_upd=fc-167" class="escp ">厨具</a> <a href="list.html#textiles/index.html?f_upd=fc-271" class="escp ">融暄家纺</a> <a href="list.html#textiles/index.html?f_upd=fc-201" class="escp ">必柔家纺</a> <a href="list.html#textiles/index.html?f_upd=fc-240" class="escp ">M&N家纺</a> <a href="list.html#lamp/index.html?f_upd=fc-183" class="escp ">灯具</a> <a href="list.html#mattress/index.html?f_upd=fc-209" class="escp ">床垫</a> <a href="list.html#bedroom/index.html?f_upd=fc-155" class="escp ">卧室家具</a> <a href="list.html#livingroom/index.html?f_upd=fc-77" class="escp ">客厅家具</a> <a href="list.html#diningroom/index.html?f_upd=fc-78" class="escp ">餐厅家具</a> <a href="list.html#studyroom/index.html?f_upd=fc-79" class="escp last">书房家具</a> </div> </li> </ul> </div> </div> </div> <div class="section"> <ul class="section-bread clearfix"> <li> <a href="http://www.biyao.com">首页</a> <span class="bread-title"> / 经典北欧系列奥氏体真空保温壶</span> </li> <li class="b-company" id="supplierInfo"> <i></i> <span class="supplier_name"></span> <div class="company none" id="companycssreInfo"> <div class="company-head"> <div> <span class="company-icon"> <img class="supplier_logo_url" src="" alt=""></span> <span class="company-name supplier_name"></span> <i></i> <b id="supplierInfoClose"></b> </div> <span >服务电话:<span class="supplier_userTel"></span></span> </div> <div class="company-score"> <ul> <li id="desc_score"> <span>实物相符 : </span> <i><b class="scoreImg"></b></i> <span class="score-num score"></span> </li> <li id="service_score"> <span>商家服务 : </span> <i><b class="scoreImg"></b></i> <span class="score-num score"></span> </li> <li id="logistics_score"> <span>物流服务 : </span> <i><b class="scoreImg"></b></i> <span class="score-num score"></span> </li> </ul> </div> <div class="company-intro last supplier_StoreDesc"> </div> </div> </li> <li class="b-phone"> <i></i> <span class="supplier_userTel"></span> </li> </ul> <div class="section-editor clearfix"> <div class="editor-main"> <p><img src="http://img.biyao.com/files/temp/f9/f91a43f5ea026261.jpg" alt=""/></p> <ul> <li bigImg="http://img.biyao.com/files/temp/f9/f91a43f5ea026261.jpg" class="click"><img src="http://img.biyao.com/files/temp/f9/f91a43f5ea026261.jpg" alt="" width="100"/><span></span></li> <li bigImg="http://img.biyao.com/files/temp/96/960ba7d0ca35c582.jpg" ><img src="http://img.biyao.com/files/temp/96/960ba7d0ca35c582.jpg" alt="" width="100"/><span></span></li> <li bigImg="http://img.biyao.com/files/temp/31/3186a35bbe2c7733.jpg" ><img src="http://img.biyao.com/files/temp/31/3186a35bbe2c7733.jpg" alt="" width="100"/><span></span></li> <li bigImg="http://img.biyao.com/files/temp/11/1125bf3b2c225d07.jpg" ><img src="http://img.biyao.com/files/temp/11/1125bf3b2c225d07.jpg" alt="" width="100"/><span></span></li> </ul> </div> <div class="editor-panel"> <div class="panel-top"> <h1>经典北欧系列奥氏体真空保温壶</h1> <input type="hidden" name="g_id" id="g_id" value="1"> <p>长效保温，欧式设计，奥氏体304不锈钢</p> </div> <ul class="panel-main"> <li class="panel-press"> <span>售价</span> <div><span class="panel-maney">￥<i class="totalPrice pri">119</i></span><span class="panel-duration">生产周期：<span class="totalDuration">10</span>天</span></div> </li> <li class="panel-specs"> <span>颜色</span> <div> <ul> <li class="panel-size cli" id="2587">波尔多红<em></em></li> <li class="panel-size cli" id="2588">亮银色<em></em></li> </ul> </div> </li> <li class="panel-specs"> <span>尺寸</span> <div id="my_size"> <ul> <li class="panel-size" id="2589">2升<em></em></li> </ul> </div> </li> <li class="mg_t5 mg_b20 cursor" id="SizeDetailDialog"><div>查看尺码对照表</div></li> <li class="panel-count"> <span>数量</span> <div> <p class="panel-num"> <span class="panel-minus">-</span> <span class="panel-number">1</span> <span class="panel-add">+</span> </p> </div> </li> </ul> <div class="panel-bottom"> <p id="goBuyBtn"><i></i>加入购物车</p> <ul class="clearfix supplier_policy"> </ul> </div> </div> </div> <div class="wrap mg_t30 ie78"> <ul class="commodityList sizeZero" name="commodityList"> <li class="inline productInfo product_Commodity checked " name="productInfo" data-a="0">商品信息<i class="inline"></i></li> <li class="inline productReview product_Commodity " name="productReview" data-a="130">评价详情 <i class="inline"></i></li> <li class="inline supplierInfo product_Commodity" name="supplierInfo" data-a="260">商家服务政策 </li> <li class="checkedLine" style="left: 0"></li> </ul> <!-- 商品信息 --> <div class="cmImgShow t_c product_border productInfoView " name="productInfoView"> <p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053467923974311_0.jpg" style="" title="罗马壶详情图1200_01.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469125395380_0.jpg" style="" title="罗马壶详情图1200_02.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468031302499_0.jpg" style="" title="罗马壶详情图1200_03.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469230383564_0.jpg" style="" title="罗马壶详情图1200_04.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468161260728_0.jpg" style="" title="罗马壶详情图1200_05.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469352999779_0.jpg" style="" title="罗马壶详情图1200_06.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/29/08/productiondetail/data/192168100161_4280_636053776523155295_0.jpg" style="" title="lm-pc.jpg" alt="lm-pc.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469465007976_0.jpg" style="" title="罗马壶详情图1200_08.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468404933156_0.jpg" style="" title="罗马壶详情图1200_09.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468462029256_0.jpg" style="" title="罗马壶详情图1200_10.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468551729414_0.jpg" style="" title="罗马壶详情图1200_11.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468601337501_0.jpg" style="" title="罗马壶详情图1200_12.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468676373633_0.jpg" style="" title="罗马壶详情图1200_13.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100162_8940_636053468756713774_0.jpg" style="" title="罗马壶详情图1200_14.jpg"/></p><p><img src="http://img.biyao.com/files/data0/2016/07/28/23/productiondetail/data/192168100161_9096_636053469960776847_0.jpg" style="" title="罗马壶详情图1200_15.jpg"/></p><p><br/></p></div> <!-- 评价详情 --> <div class="product_border productReviewView none" name="productReviewView"> <div class=" pd_t20 pd_b20"> <div class=""> <div class="satisfactionBox sizeZero" id="avgRating"> <span class="inline f16 mg_l15 col_666">商品满意度</span> <span class="inline mg_l30"> <em class="bigXjGray inline spIcon"><i class="bigXjF60 inline spIcon" style="width: 0px" id="avgRatingImg"></i></em> </span> <span class="inline mg_l20"><span class="col_f60 f16 inline" id="avgRatingCount">0</span> <span class="inline col_666 f16">分</span></span> <span class="inline col_999 f12 mg_l40">已有 <span id="ReviewAllCount">0</span> 次评价 </span> </div> <div class="evaluateItem"></div> </div> <div id="pagerDiv" class="pagination mg_t20 pages "></div> </div> </div> <!-- 商家服务政策 --> <div class="cmImgShow product_border supplierInfoView none" name="supplierInfoView"> <div class="pd_l20 pd_r20"></div> </div> </div> </div> <div data-selector="J_im" id="webIM_showDiv"></div> <div class="footer_links clearfix J_1200 auto"> <div class="content wrap sizeZero"> <div class="footer_nav_box inline"> <ul class="footer_nav_list clearfix"> <li> <a target="_blank" href="list.html#minisite/ljby">关于必要</a> <span class="bg_line"></span> </li> <li> <a target="_blank" href="list.html#help/8.html">加入必要</a> <span class="bg_line"></span> </li> <li> <a target="_blank" href="tel.html">联系我们</a> <span class="bg_line"></span> </li> <li class="none"> <a target="_blank" href="list.html#list/39/list-1.html">网站地图</a> </li> <li> <a target="_blank" href="tel.html">官方微博</a> <span class="bg_line"></span> </li> </ul> <p class="col_999 lineH18 mg_t10">◎BIYAO.COM 2015 版权所有 </p> <p class="col_999 lineH18 mg_t10"><i class="gwab_icon inline"></i><a class="col_999 inline mg_r5" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496139" target="_blank">粤公网安备44049102496139号</a> <a class="col_999 inline" href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="_blank">粤ICP备13088531号</a> </p> </div> <div class="footer_evm sizeZero inline"> <div class="inline mg_r40 footer_evm_img"> <div class="an_bg inline mg_r15"></div> <div class="inline evm_tit_msg"> <span class="col_333 f14">扫描二维码下载</span><br/> <span class="col_724 f14">必要手机客户端</span> </div> </div> <div class="inline mg_r10 footer_evm_img"> <div class="weixin_bg inline mg_r15"></div> <div class="inline evm_tit_msg"> <span class="col_333 f14">扫描二维码关注</span><br/> <span class="col_724 f14">必要官方微信</span> </div> </div> </div> </div> </div> <script type="text/javascript"> LazyLoad.js([ window.ControllerSite+'__STATIC__/front/pc/common/js/jquery-1.8.3.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/minisite/byshoes/js/jquery.cookie.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/jquery.lazyload.min.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/jquery.extention.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/common.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/www/js/common.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/ui/dialog.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/scopeControll.js?biyaov='+window.version, //window.ControllerSite+'pc/common/js/freemodel/freemodel.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/common/js/ProductReview.js?biyaov='+window.version, window.ControllerSite+'__STATIC__/front/pc/www/js/product/lazyloadIM.js?biyaov='+window.version ]) </script></body> <script type="text/javascript" src="__STATIC__/front/pc/common/js/bytrack.js?v=biyao_8b3cc7e"></script> <script src="__STATIC__/js/jquery.js"></script> <script> $(".cli").click(function () { //获取商品的自增id var g_id = $("#g_id").val(); //获取到这个li的值 var li_val = $(this).text(); //设置一下样式 $(this).css("border","2px solid red"); //把点击的这个对象的兄弟节点的样式去掉 $(this).siblings().css("border",""); //解决了效果之后，我们查询当前选中的这个对象底下有哪些值 $.get("{:url('Index/goods_search')}?g_id="+g_id+"&color="+li_val,function (data) { // console.log(JSON.parse(data)); if(data==0){ //没有查到数据直接显示没有信息 $("#my_size ul").text("暂无信息"); }else{ //查到数据转成键值对的json var res = JSON.parse(data); //定义一个空的字符串 var str = ''; //循环赋值 $.each(res,function (k,v) { str += "<li class='panel-size sli' id='2589'>"+v.size+"<em></em></li>"; }); //替换 $("#my_size ul").html(str); //接着走 $(".sli").click(function () { var size_val = $(this).text(); //设置一下样式 $(this).css("border","2px solid red"); //把点击的这个对象的兄弟节点的样式去掉 $(this).siblings().css("border",""); //ajax查询价格 $.get("{:url('Index/search_goods_price')}?g_id="+g_id+"&color="+li_val+"&size="+size_val,function (data) { var res2 = JSON.parse(data); //替换价格 $(".pri").text(res2.price); }) }); } }) }); </script> </html>
重点看页面底部的jq部分以及相关的点击按钮那部分代码
php代码：
public function goods_info(){ return view(); } public function goods_search(){ //接收传值 $g_id = Request::instance()->param("g_id"); $color = Request::instance()->param("color"); $data = Db::table("sku")->where("goods_id",$g_id)->where("color",$color)->select(); if(empty($data)){ echo 0; }else{ echo json_encode($data); } } public function search_goods_price(){ $g_id = Request::instance()->param("g_id"); $color = Request::instance()->param("color"); $size = Request::instance()->param("size"); $data = Db::table("sku") ->where("goods_id",$g_id) ->where("color",$color) ->where("size",$size) ->find(); if(empty($data)){ echo 0; }else{ echo json_encode($data); } }