小弟刚开始练习，遇到问题，请教，关于代码重复的问题。

Question

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

Answer 1

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);

Answer 2

//elClick是点击的元素的选择器字符串
//elMove是要动的那个
//speed是速度，不想自定义速度可以写死
function addClick(elClick, elMove, speed) {
    $(elClick).click(function() {
        $(elMove).slideDown(speed).siblings().hide(speed);
    });
}

包括你如果只想每次传数字进去也是可以的。内部$('Apr'+num) $('AprSmall_thing'+num)拼串就好了然后复用的函数参数只写num

Answer 3

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

  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” 也可以作为参数

Answer 4

这么写ok不？

function sth(clickSelector, slideSelector){
    $(clickSelector).click(function(){
        $(slideSelector).slideDown(800).siblings().hide(800)
    })
}
sth('.Apr1', '.AprSmall_thing1');
//sth('','')

Answer 5

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);
  }
}