一个页面如何多次使用同一段JS代码？

seemoon2008 2016-08-13 06:10:45

最近在做一个商城，商城有16个楼层，每个楼层都需要一个TAB自动切换，都是用同一段JS，但是不知道怎么封装成函数，结果16层重复了16遍JS，坛里的高手教教我怎么来弄，本人纯属JS小白，在此感激不尽！

效果图片如下：（红色框为TAB自动切换，蓝色框是根据红色的TAB自动切换）

HTML代码如下：（每个楼层基本就是重复这个HTML的框架）



<div class="mbr">

  <div class="tit">

    <ul>

      <li><a href="#" target="_blank">连衣裙</a></li>

      <li><a href="#" target="_blank">短裙</a></li>

    </ul>

  </div>

  <div class="con">

    <div class="cbox">

      <ul>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：9251000</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad009.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：92500件</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad010.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：0</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad011.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：91</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

      </ul>

    </div>

    <div class="cbox">

      <ul>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：9251000</span></p>

            <p><em><a href="#" target="_blank">厦门网商邮箱是商贸有限公司</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad009.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：92500件</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad010.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：0</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

        <li>

          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad011.jpg" alt="" /> <em>春群布艺韩版大号简约门后收纳挂袋 墙上挂式春群布艺韩版大号简约门后收纳挂袋 墙上挂式</em> <span></span> </a> </div>

          <div class="txt">

            <p><b>￥45000.00</b><span>销量：91</span></p>

            <p><em><a href="#" target="_blank">潍坊在线维护潍坊在线维护潍坊在线维护潍坊在线维护</a></em></p>

          </div>

        </li>

      </ul>

    </div>

  </div>

</div>

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



var t = -1; //第i+1个tab开始

var offset = 2000; //轮换时间

var timer = null;

function autoroll(){

	n = $('.m3f .box .mbr .tit ul li').length-1;

	t++;

	if(t > n){

	t = 0;

	}

	slide(t);

	timer = window.setTimeout(autoroll, offset);

}



$(document).ready(function(){

	$('.m3f .box .mbr .tit ul li:first').addClass('on');

	$('.m3f .box .mbr .con .cbox:first').css('display','block');

	autoroll();

	hookThumb();

})



function slide(t){

	$('.m3f .box .mbr .tit ul li').eq(i).addClass('on').siblings().removeClass('on');

	$('.m3f .box .mbr .con .cbox').eq(i).css('display','block').siblings('.m3f .box .mbr .con .cbox').css('display','none');

}



function hookThumb(){    

	$('.m3f .box .mbr .tit ul li').hover(

	function(){

		if(timer){

			clearTimeout(timer);

			i = $(this).prevAll().length;

			slide(i); 

		}

	},function(){

		timer = window.setTimeout(autoroll, offset);  

		this.blur();            

		return false;

	}); 

}

每个楼层的.m3f .box .mbr .tit ul li和.m3f .box .mbr .con .cbox都是一样的，但是会发现只有第一个能够正常自动切换，其他的都不能自动切换。这个要怎么弄，才能让那16层共用上面那一段JS代码，而不用一直重复上述JS代码?

...全文

397 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

seemoon2008 2016-08-14

打赏
举报

@泡泡鱼_ 你做得已经很好了，对我很有帮助，我现在也一直在尝试着，就是JS零基础，要一直去试误，比较费时间，这不现在已经凌晨了，还在研究这两个看似比较小的问题，非常感谢你！要不是你解决了大部分代码，不然估计要研究个把星期了，前端就JS最菜，向兄台学习了。

泡泡鱼_ 2016-08-14

打赏
举报

我不牛，菜得很。这里很多都是我前辈

seemoon2008 2016-08-14

打赏
举报

@泡泡鱼_ 承蒙兄台教诲，兄台JS就是牛，虚心学习了！

泡泡鱼_ 2016-08-14

打赏
举报

多尝试，只有好处没有坏处！几个小时不算什么，十几个小时都常有的事……

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
    .cbox{display:none;}
    .on{ background-color:Red;}
    </style>
    <script type="text/javascript">
        $(function(){
            //设置事件
            $('.tit li').bind({
                mouseenter:function(){
                    var _this   =   $(this),
                        idx     =   _this.index(),
                        cbox    =   _this.closest('.tit').next().find('.cbox');
                    //记录当前正在显示的tab子签索引****    
                    _this.closest('.tit').attr('data-idx',idx);    
                    //设置tab触发主体样式
                    _this.addClass('on').siblings().removeClass('on');
                    //显示对应的套图
                    cbox.hide().eq(idx).show();
                }
            });
            
            /*
                鼠标[进入/离开]展示中商品列表时，[增加/移除]暂停自动切换的自定义标识[class名称：iStop]
            */
            $('.cbox').bind({
                mouseenter:function(){
                    //鼠标进入展示的商品列表时，给tit增加一个class名称[iStop]作为标识，以申明当前tab暂时停止自动切换
                    $(this).parent().prev().addClass('iStop');
                },
                mouseleave:function(){
                    //鼠标从展示的商品列表移开时，移除tit中停止自动切换的标识
                    $(this).parent().prev().removeClass('iStop');
                }
            });
             
            //使每一个tab的第一个处于选中状态：当然，页面加载时，能够直接让第一个处于选中状态效果会更好，就可以不用通过js来初始化了
            $('.tit').each(function(){
                $(this).find('li').eq(0).trigger('mouseenter');
            });
             
            
            //每两秒切换一次
            window.setInterval(function(){
                $('.tit').each(function(){
                    //如果当前tab需要停止切换时，直接返回，暂不切换******
                    if($(this).hasClass('iStop')){
                        return;
                    };
                    var lis     =   $(this).find('li'),
                        max     =   lis.size()-1,
                        showIdx =   parseInt($(this).attr('data-idx')),
                        nextIdx =   (showIdx<max)
                                        ?   (showIdx+1)
                                        :   0; 
                    
                    lis.eq(nextIdx).trigger('mouseenter');
                })
            },2000);
        })
    </script>
</head>
<body>
<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">连衣裙</a></li>
      <li><a href="#" target="_blank">短裙</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>1_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">1_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em> 1_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">1_2</a></em></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
 
 
<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">aaaaaa</a></li>
      <li><a href="#" target="_blank">bbbbbb</a></li>
      <li><a href="#" target="_blank">ccccc</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>2_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">2_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>2_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">2_2</a></em></p>
          </div>
        </li>
        
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>2_3</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">2_3</a></em></p>
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</div>
 
<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">连衣裙</a></li>
      <li><a href="#" target="_blank">短裙</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>3_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">3_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em> 3_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">3_2</a></em></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

泡泡鱼_ 2016-08-13

打赏
举报

引用 3 楼 seemoon2008 的回复:

@泡泡鱼_ 你的方法是对的，好像还有两个小问题： 1、就是第一个会从第一组的TAB标题能够正常自动切换，但是二组TAB的标题是第一个然后跳过第二个，直接到了第三个了； 2、当鼠标停在cbox里面时，那个切换还一直在进行，能不能让鼠标指向cbox里面的一个商品时，自动切换停止。麻烦兄台再帮我看看上面的两个问题，感激不尽了。

为此，你做过什么尝试了？你原本有尝试，想整合，我才给你代码，让你参考！我思虑不周，有bug，也有没达到你预想的功能，然后，你为此做了什么呢？

seemoon2008 2016-08-13

打赏
举报

@泡泡鱼_ 你的方法是对的，好像还有两个小问题： 1、就是第一个会从第一组的TAB标题能够正常自动切换，但是二组TAB的标题是第一个然后跳过第二个，直接到了第三个了； 2、当鼠标停在cbox里面时，那个切换还一直在进行，能不能让鼠标指向cbox里面的一个商品时，自动切换停止。麻烦兄台再帮我看看上面的两个问题，感激不尽了。

泡泡鱼_ 2016-08-13

打赏
举报

因为你没有把相应的css贴上来，本地为了测试，减小了每个tab要显示的产品数量

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
    .cbox{display:none;}
    </style>
    <script type="text/javascript">
        $(function(){
            //设置事件
            $('.tit li').bind({
                mouseenter:function(){
                    var _this   =   $(this),
                        idx     =   $(this).index(),
                        cbox    =   _this.closest('.tit').next().find('.cbox');
                    //设置tab触发主体样式
                    _this.addClass('on').siblings().removeClass('on');
                    //显示对应的套图
                    cbox.hide().eq(idx).show();
                }
            });
            
            //使每一个tab的第一个处于选中状态：当然，页面加载时，能够直接让第一个处于选中状态效果会更好，就可以不用通过js来初始化了
            $('.tit').each(function(){
                $(this).find('li').eq(0).trigger('mouseenter');
            });
            
            
            //每两秒切换一次
            window.setInterval(function(){
                $('.tit').each(function(){
                    var lis     =   $(this).find('li'),
                        max     =   lis.size()-1,
                        showIdx =   $('.tit li.on').index(),
                        nextIdx =   (showIdx<max)
                                        ?   (showIdx+1)
                                            :   0; 
                    lis.eq(nextIdx).trigger('mouseenter');
                })
            },2000);
        })
    </script>
</head>
<body>
<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">连衣裙</a></li>
      <li><a href="#" target="_blank">短裙</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>1_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">1_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em> 1_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">1_2</a></em></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>


<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">连衣裙</a></li>
      <li><a href="#" target="_blank">短裙</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>2_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">2_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>2_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">2_2</a></em></p>
          </div>
        </li>
       
      </ul>
    </div>
  </div>
</div>

<div class="mbr">
  <div class="tit">
    <ul>
      <li><a href="#" target="_blank">连衣裙</a></li>
      <li><a href="#" target="_blank">短裙</a></li>
    </ul>
  </div>
  <div class="con">
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em>3_1</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">3_1</a></em></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="cbox">
      <ul>
        <li>
          <div class="pic"> <a href="#" target="_blank"> <img src="skin/img/ad/mall/ad008.jpg" alt="" /> <em> 3_2</em> <span></span> </a> </div>
          <div class="txt">
            <p><b>￥45000.00</b><span>销量：9251000</span></p>
            <p><em><a href="#" target="_blank">3_2</a></em></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

beyond__me 2016-08-13

打赏
举报

$(".m3f .box .mbr .tit ul li").click(function(){ var _index=$(this).index;//获取被点击元素的index $(this).parent.parent.next.find("cbox").eq(_index).show().siblings.hide();//this就可以实现 }) 用这个应该就可以了