扫码关注官方订阅号
就是这个.slideDown(800).siblings().hide(800);一直重复,想简介一下代码。其实每次改变的只是数字1,2,3.刚开始可能代码思想跟逻辑都还不成熟,还望大神指点啊~
.slideDown(800).siblings().hide(800);
ES6:
for (let i = 1; i <= 3; i++) $(`.Apr${i}`).click(function () { $(`.AprSmall_thing${i}`).slideDown(800).siblings().hide(800); });
ES5:
for (var i = 1; i <= 3; i++) (function (i) { $('.Apr'+i).click(function () { $('.AprSmall_thing'+i).slideDown(800).siblings().hide(800); }); })(i);
//elClick是点击的元素的选择器字符串 //elMove是要动的那个 //speed是速度,不想自定义速度可以写死 function addClick(elClick, elMove, speed) { $(elClick).click(function() { $(elMove).slideDown(speed).siblings().hide(speed); }); }
包括你如果只想每次传数字进去也是可以的。内部$('Apr'+num) $('AprSmall_thing'+num)拼串就好了然后复用的函数参数只写num
//写一个公共方法 调用 传入不同的值 就可以了 function getClick(apr,aprThing){ this.apr=apr; this.aprThing=aprThing; apr.click(function(){ aprThing.slideDown(800).siblings().hide(80); }) } //在外面调用: getClick($(".Apr1"),$(".AprSmall_thing1")); getClick($(".Apr2"),$(".AprSmall_thing2")); getClick($(".Apr3"),$(".AprSmall_thing3"));
当然 你代码中的数字“800” “80” 也可以作为参数
这么写ok不?
function sth(clickSelector, slideSelector){ $(clickSelector).click(function(){ $(slideSelector).slideDown(800).siblings().hide(800) }) } sth('.Apr1', '.AprSmall_thing1'); //sth('','')
jQuery Object实际上就是一个css选择器, 所以可以使用这样的写法:
jQuery Object
$('.class1,.class2').click(function () { // do something... });
但是题主的function里面还有序号区别, 可以考虑使用for循环来精简代码:
for (let i = 1; i <=3; i += 1) { // 隐式转换成字符串, '.Apr'+序号, 下同 let classOuter = '.Apr' + i; let classInner = '.AprSmall_thing' + i; // 绑定事件 $(classOuter).click(function () { $(classInner).slideDown(800).siblings().hide(800); } }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
ES6:
ES5:
包括你如果只想每次传数字进去也是可以的。内部$('Apr'+num) $('AprSmall_thing'+num)拼串就好了然后复用的函数参数只写num
当然 你代码中的数字“800” “80” 也可以作为参数
这么写ok不?
jQuery Object实际上就是一个css选择器, 所以可以使用这样的写法:但是题主的function里面还有序号区别, 可以考虑使用for循环来精简代码: