trimpash实现jd选项卡首次输入

最新推荐文章于 2024-07-08 01:54:03 发布
weixin_33725126
最新推荐文章于 2024-07-08 01:54:03 发布
阅读量98
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bgxiaoniu/p/6867082.html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Title</title>
   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
   <title>【AppleiPhone7】Apple iPhone 7 (A1660) 128G 亮黑色 移动联通电信4G手机【行情 报价 价格 评测】-京东</title>
   <meta name="keywords" content="AppleiPhone7,AppleiPhone7,AppleiPhone7报价,AppleiPhone7报价"/>
   <meta name="description"
        content="【AppleiPhone7】京东JD.COM提供AppleiPhone7正品行货，并包括AppleiPhone7网购指南，以及AppleiPhone7图片、iPhone7参数、iPhone7评论、iPhone7心得、iPhone7技巧等信息，网购AppleiPhone7上京东,放心又轻松"/>
   <meta name="format-detection" content="telephone=no">
   <meta http-equiv="mobile-agent" content="format=xhtml; url=//item.m.jd.com/product/3133829.html">
   <meta http-equiv="mobile-agent" content="format=html5; url=//item.m.jd.com/product/3133829.html">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <link rel="canonical" href="//item.jd.com/3133829.html"/>
   <link rel="dns-prefetch" href="//misc.360buyimg.com"/>
   <link rel="dns-prefetch" href="//static.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img10.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img11.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img13.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img12.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img14.360buyimg.com"/>
   <link rel="dns-prefetch" href="//img30.360buyimg.com"/>
   <link rel="dns-prefetch" href="//pi.3.cn"/>
   <link rel="dns-prefetch" href="//ad.3.cn"/>
   <link rel="dns-prefetch" href="//dx.3.cn"/>
   <link rel="dns-prefetch" href="//c.3.cn"/>
   <link rel="dns-prefetch" href="//d.jd.com"/>
   <link rel="dns-prefetch" href="//x.jd.com"/>
   <link rel="dns-prefetch" href="//wl.jd.com"/>
   <link type="text/css" rel="stylesheet"
        href="//misc.360buyimg.com/jdf/1.0.0/unit/??ui-base/1.0.0/ui-base.css,shortcut/2.0.0/shortcut.css,global-header/1.0.0/global-header.css,myjd/2.0.0/myjd.css,nav/2.0.0/nav.css,shoppingcart/2.0.0/shoppingcart.css,global-footer/1.0.0/global-footer.css,service/1.0.0/service.css"/>
   <link rel="stylesheet" type="text/css"
        href="//static.360buyimg.com/item/default/1.0.32/components/??/common/common.css,/main/main.css,/address/address.css,/prom/prom.css,/colorsize/colorsize.css,/buytype/buytype.css,/track/track.css,/suits/suits.css,/baitiao/baitiao.css,/o2o/o2o.css,/summary/summary.css,/buybtn/buybtn.css,/crumb/crumb.css,/fittings/fittings.css,/detail/detail.css,/contact/contact.css,/popbox/popbox.css,/preview/preview.css,/info/info.css,/imcenter/imcenter.css,/jdservice/jdservice.css,/popupCar/popupCar.css"/>
   <style type="text/css">
      /*    #choose-service .service-type-yb .yb-item-cat:hover .more-item {
               display: block;
            }*/
   </style>
</head>
<body version="140120" class="cat-1-9987 cat-2-653 cat-3-655 item-3133829 JD JD-1">
<div class="itemInfo-wrap">

</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/trimpash的.js"></script>
<script type="text/javascript">
   //接口地址 https://cd.jd.com/yanbao/v3?skuId=3133829&cat=9987,653,655&area=1_72_2799_0&brandId=14026&callback=yanbao_jsonp_callback
   //请求地址？后面的是data里面的数据
   var template = '\
                  <div id="choose-service" class="li" data-hook="hide">\
                  <div class="dt" data-yb="new_yb_server">增值保障</div>\
                  <div class="dd">\
                     <div class="service-type-yb clearfix">\
                        {for item in list}\
                        <div class="yb-item-cat">\
                           <div class="yb-item">\
                              <img class="icon" src="//img10.360buyimg.com${item.imgUrl}">\
                              <span class="name">${item.details[0].bindSkuName}</span><span class="price">￥ ${item.details[0].price}</span><i class="arrow-icon"></i>\
                           </div>\
                           <div class="more-item">\
                              <ul>\
                                 {for item1 in item.details}\
                                 <li data-sku="${item.mainSkuId}">\
                                    <div class="title" title="享2900元回收和1年意外保">\
                                       <span class="choose-btn" clstag="shangpin|keycount|product|jingdongfuwu_12007135370">\
                                          <i class="sprite-checkbox"></i>\
                                          {if item == list[0]}\
                                             <span class="tips">优惠</span>\
                                          {/if}\
                                          <span class="name">${item1.bindSkuName}</span>\
                                          <span class="price">￥ ${item1.price}</span>\
                                       </span>\
                                       <a href="//item.jd.com/${item.mainSkuId}.html" target="_blank" class="detail-more"clstag="shangpin|keycount|product|jingdongfuwu_xiangqing">详情<s class="s-arrow">&gt;&gt;</s></a>\
                                    </div>\
                                 </li>\
                                 {/for}\
                              </ul>\
                           </div>\
                        </div>\
                        {/for}\
                           <div class="service-tips"><a href="#none"><i class="sprite-question"></i></a>\
                           <div class="tips">\
                              <div class="sprite-arrow"></div>\
                              <div class="content">\
                                 <dl>\
                                    <dd>\
                                       增值保障是指凡在京东购买商品或服务的消费者，在保障期间内遇到无论是正常使用中的问题还是意外事故，即可享受增值保障服务。保障内容包括：延长保修、只换不修、意外保护、服务保障。覆盖家电、手机数码、电脑办公、汽车用品、服饰家居等商品。\
                                    </dd>\
                                 </dl>\
                                 <p>增值保障服务，只能提供增值税普通电子发票，如有疑问，请与<a href="//chat.jd.com/pop/chat?shopId=162403" target="_blank">在线客服</a>联系</p>\
                              </div>\
                           </div>\
                        </div>\
                     </div>\
                  </div>\
                        </div>'

   $.ajax({
      url: 'https://cd.jd.com/yanbao/v3',
      data: {
         skuId: 3133829,
         cat: '9987,653,655',
         area: '1_72_2799_0',
         brandId: 14026
      },
      scriptCharset: "gbk",
      dataType: 'jsonp',
      cache: true,
      jsonpCallback: 'yanbao_jsonp_callback',
      success: function (date) {
         var result = date[3133829];
         console.log(result[1].imgUrl);
         console.log(result);
//       console.log(result);
//       var result1 = result;
         var obj = {list: result};
         var str = template.process(obj);
         /*var date1 = date[3133829][0].details;
          console.log(date);*/
         $('.itemInfo-wrap').append(str);
      }
   });
   $('.itemInfo-wrap').delegate('.choose-btn', 'click', function () {
      var $this = $(this);
      var $li = $this.parents('li');//
      console.log($li[0]);
      var $sybItemCat = $li.parents('.yb-item-cat');//每一个下拉框
      var $ybItem = $sybItemCat.find('.yb-item');
      var hasSelected = $li.hasClass('selected');
      if (hasSelected) {
         $li.removeClass('selected');
         $sybItemCat.removeClass('selected');
         $sybItemCat.removeClass('hover');
      } else {
         $li.addClass('selected');
         $li.siblings().removeClass('selected');//选中自己移除兄弟节点
         $sybItemCat.addClass('selected');
         $sybItemCat.removeClass('hover');

         var name = $this.find('.name').html();
         var price = $this.find('.price').html();
         $ybItem.find('.name').html(name);
         $ybItem.find('.price').html(price);
         console.log(name);
         console.log(price);

//       $this.updateFirst($li, $sybItemCat.find())
      }
   });

   $('.itemInfo-wrap').delegate('.yb-item-cat', 'mouseenter', function () {
      var $this = $(this);
      $this.addClass('hover')
   });
   $('.itemInfo-wrap').delegate('.yb-item-cat', 'mouseleave', function () {
      var $this = $(this);
      $this.removeClass('hover');
   })
</script>
</body>
</html>