收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1255|回复: 3

[jquery] 一个页面如何多次使用同一段JS代码?

[复制链接]
发表于 2016-8-13 18:52:34 | 显示全部楼层 |阅读模式
最近在做一个商城,商城有16个楼层,每个楼层都需要一个TAB自动切换,都是用同一段JS,但是不知道怎么封装成函数,结果16层重复了16遍JS,坛里的高手教教我怎么来弄,本人纯属JS小白,在此感激不尽!

效果图片如下:(红色框为TAB自动切换,蓝色框是根据红色的TAB自动切换)
13.jpg

HTML代码如下:(每个楼层基本就是重复这个HTML的框架)


  1. <div class="mbr">
  2.   <div class="tit">
  3.     <ul>
  4.       <li><a href="#" target="_blank">连衣裙</a></li>
  5.       <li><a href="#" target="_blank">短裙</a></li>
  6.     </ul>
  7.   </div>
  8.   <div class="con">
  9.     <div class="cbox">
  10.       <ul>
  11.         <li>
  12.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  13.           <div class="txt">
  14.             <p><b>¥45000.00</b><span>销量:9251000</span></p>
  15.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在</a></em></p>
  16.           </div>
  17.         </li>
  18.         <li>
  19.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad009.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  20.           <div class="txt">
  21.             <p><b>¥45000.00</b><span>销量:92500件</span></p>
  22.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  23.           </div>
  24.         </li>
  25.         <li>
  26.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad010.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  27.           <div class="txt">
  28.             <p><b>¥45000.00</b><span>销量:0</span></p>
  29.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  30.           </div>
  31.         </li>
  32.         <li>
  33.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad011.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  34.           <div class="txt">
  35.             <p><b>¥45000.00</b><span>销量:91</span></p>
  36.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  37.           </div>
  38.         </li>
  39.       </ul>
  40.     </div>
  41.     <div class="cbox">
  42.       <ul>
  43.         <li>
  44.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  45.           <div class="txt">
  46.             <p><b>¥45000.00</b><span>销量:9251000</span></p>
  47.             <p><em><a href="#" target="_blank">厦门网商邮箱是商贸有限公司</a></em></p>
  48.           </div>
  49.         </li>
  50.         <li>
  51.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad009.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  52.           <div class="txt">
  53.             <p><b>¥45000.00</b><span>销量:92500件</span></p>
  54.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  55.           </div>
  56.         </li>
  57.         <li>
  58.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad010.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  59.           <div class="txt">
  60.             <p><b>¥45000.00</b><span>销量:0</span></p>
  61.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  62.           </div>
  63.         </li>
  64.         <li>
  65.           <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad011.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>
  66.           <div class="txt">
  67.             <p><b>¥45000.00</b><span>销量:91</span></p>
  68.             <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>
  69.           </div>
  70.         </li>
  71.       </ul>
  72.     </div>
  73.   </div>
  74. </div>
复制代码


切换的JS如下:(.m3f .box .mbr .tit ul li来获取标题,也就是TAB的标题,如前面的‘连衣裙’、‘短裙’,.m3f .box .mbr .con .cbox获取的是每个TAB标题对应下的产品列表。)


  1. var t = -1; //第i+1个tab开始
  2. var offset = 2000; //轮换时间
  3. var timer = null;
  4. function autoroll(){
  5.         n = $('.m3f .box .mbr .tit ul li').length-1;
  6.         t++;
  7.         if(t > n){
  8.         t = 0;
  9.         }
  10.         slide(t);
  11.         timer = window.setTimeout(autoroll, offset);
  12. }

  13. $(document).ready(function(){
  14.         $('.m3f .box .mbr .tit ul li:first').addClass('on');
  15.         $('.m3f .box .mbr .con .cbox:first').css('display','block');
  16.         autoroll();
  17.         hookThumb();
  18. })

  19. function slide(t){
  20.         $('.m3f .box .mbr .tit ul li').eq(i).addClass('on').siblings().removeClass('on');
  21.         $('.m3f .box .mbr .con .cbox').eq(i).css('display','block').siblings('.m3f .box .mbr .con .cbox').css('display','none');
  22. }

  23. function hookThumb(){   
  24.         $('.m3f .box .mbr .tit ul li').hover(
  25.         function(){
  26.                 if(timer){
  27.                         clearTimeout(timer);
  28.                         i = $(this).prevAll().length;
  29.                         slide(i);
  30.                 }
  31.         },function(){
  32.                 timer = window.setTimeout(autoroll, offset);  
  33.                 this.blur();            
  34.                 return false;
  35.         });
  36. }
复制代码


每个楼层的.m3f .box .mbr .tit ul li和.m3f .box .mbr .con .cbox都是一样的,但是会发现只有第一个能够正常自动切换,其他的都不能自动切换。这个要怎么弄,才能让那16层共用上面那一段JS代码,而不用一直重复上述JS代码?
发表于 2016-8-14 18:04:49 | 显示全部楼层
封装成插件 就可以了
回复 支持 反对

使用道具 举报

发表于 2016-8-17 23:12:23 | 显示全部楼层
如果这些HTML是你自己写的,我建议再加一些class来表示。
  1. <div class="mbr mytab">
  2.   <div class="tit mytab_head">
  3.     <ul>
  4.       <li><a href="#" target="_blank">连衣裙</a></li>
  5.       <li><a href="#" target="_blank">短裙</a></li>
  6.     </ul>
  7.   </div>
  8.   <div class="con mytab_cont">
  9.     <div class="cbox mytab_box">
  10.       <ul>... </ul>
  11.     </div>
  12.     <div class="cbox mytab_box">
  13.       <ul>... </ul>
  14.     </div>
  15.   </div>
  16. </div>
复制代码
  1. <script type="text/javascript">
  2. $('.mytab .mytab_head a').click(function(){
  3.         var $this = $(this);
  4.         var $cont = $this.closest('.mytab_head').siblings('.mytab_cont');//找到对应的滚动列表
  5.         //...
  6. });
  7. </script>
复制代码
回复 支持 反对

使用道具 举报

发表于 2016-8-25 13:46:33 | 显示全部楼层
同样效果封装成一个函数,根据每层的样式名来定义一个对应Tab就可以了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 19:29 , Processed in 0.124684 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表