javascript - 小弟刚开始练习,遇到问题,请教,关于代码重复的问题。
巴扎黑
巴扎黑 2017-04-11 11:38:17
[JavaScript讨论组]

就是这个.slideDown(800).siblings().hide(800);一直重复,想简介一下代码。
其实每次改变的只是数字1,2,3.
刚开始可能代码思想跟逻辑都还不成熟,还望大神指点啊~

巴扎黑
巴扎黑

全部回复(5)
怪我咯

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

ringa_lee
//写一个公共方法  调用  传入不同的值 就可以了

  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('','')
PHPz

jQuery Object实际上就是一个css选择器, 所以可以使用这样的写法:

$('.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中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号