Question

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

最近在做一个商城，商城有16个楼层，每个楼层都需要一个TAB自动切换，都是用同一段JS，但是不知道怎么封装成函数，结果16层重复了16遍JS，坛里的高手教教我怎么来弄，本人纯属JS小白，在此感激不尽！切换的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代码?效果图片如下：（红色框为TAB自动切换，蓝色框是根据红色的TAB自动切换）

Answer 1

楼主问的是否是这种情况

<div id="msg"></div>
<script>
num = 0;
 
num++;
document.getElementById("id").innerHTML+="这是第"+num+"次加载";
</script>

上面这段代码只能加载一次

但是如过将需要反复调用的代码段放入一个方法中

<div id="msg"></div>〈input type="button" onClick = "test()"〉
<script>
num = 0;
function test(){
    num++;
    document.getElementById("id").innerHTML+="这是第"+num+"次加载";
}
</script>

这样就做到了反复加载，与C或java中的函数是一样的

但是我们发现这样一来，在页面加载的时候就没有了第一行

那么把最上面的那段代码等价写成这样

<div id="msg"></div>〈input type="button" onClick = "test()"〉
<script>
num = 0;
window.onload = function(){test();}
function test(){
    num++;
    document.getElementById("id").innerHTML+="这是第"+num+"次加载";
}
</script>

这样就好了

追问

可是我不是放在按钮中，用onClick不行呢？
我是直接放在div的class里面的，每个楼层都有TAB滑动的标题样式：.m3f .box .mbr .tit ul li和它对应的列表框.m3f .box .mbr .con .cbox，但是用上面的JS代码只能第一个.m3f .box .mbr .tit ul li和.m3f .box .mbr .con .cbox有效，后面都无效了

追答

配置那些没问题吧。另外检查一下代码是否放置位置出错。

追问

JS代码已经在上面了，我就不知道问题在哪里？所以才把代码贴了出来，听人家说要封装成函数，可是我是小白，不知道怎么封装，兄台能不能就以上代码帮我认真看下，要怎么封装？

追答

测试过是对吗，如果不行的话你要找一个PHP高手给你修改了。

追问

纯HTML、CSS、JS没有涉及到任何PHP，找PHP有什么用呢？我以为兄台是高手呢。

追答

我不是高手，你要找到相关的，我这边对PHP较为熟悉点，前端那块不是很熟。