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

图片描述

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

阅读 956
评论 2017-01-22 提问
    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

      评论 赞赏
        //写一个公共方法  调用  传入不同的值 就可以了
        
          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” 也可以作为参数

        评论 赞赏
          Dont
          • 6.8k

          这么写ok不?

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

            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);
              }
            }
            评论 赞赏
              撰写回答

              登录后参与交流、获取后续更新提醒