Question

我已经建立了一个简单的手风琴式侧面菜单，看着它，它的功能非常重。我可以学习哪些方法来减少代码量和执行时间？

我主要是将此作为一个学习点。

$('#one').css("height", "22");
$('#dtwo').css("height", "22"); 
$('#three').css("height", "22");   
    $('#t1').click(function() {
      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#one').animate({height: '120' + 'px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      }
});

$('#t2').click(function() {
      if ($('#dtwo').hasClass("extended")) {
        $('#dtwo').stop(true, true).animate({height: '22px'},500);
        $('#dtwo').removeClass("extended");
        $('#a2').stop(true, true).animate({opacity: '1'},500);
      } else {
        var height = 0;
        $(this).closest("div").children().each(function(){
           height += $(this).outerHeight(true);
        });
        $('#dtwo').animate({height: height + 5 + 'px'},500);
        $('#dtwo').addClass("extended");
        $('#a2').animate({opacity: '0'},300);
      }
});

 $('#t3').click(function() {
      if ($('#three').hasClass("extended")) {
        $('#three').stop(true, true).animate({height: '22px'},500);
        $('#three').removeClass("extended");
        $('#a3').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#three').animate({height: '270px'},500);
        $('#three').addClass("extended");
        $('#a3').animate({opacity: '0'},300);
      }
});

 $('#a1').click(function() {
      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#one').animate({height: '120px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      }
});

$('#a2').click(function() {
      if ($('#dtwo').hasClass("extended")) {
        $('#dtwo').stop(true, true).animate({height: '22px'},500);
        $('#dtwo').removeClass("extended");
        $('#a2').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#dtwo').animate({height: '120px'},500);
        $('#dtwo').addClass("extended");
        $('#a2').animate({opacity: '0'},300);
      }
});

 $('#a3').click(function() {
      if ($('#three').hasClass("extended")) {
        $('#three').stop(true, true).animate({height: '22px'},500);
        $('#three').removeClass("extended");
        $('#a3').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#three').animate({height: '270px'},500);
        $('#three').addClass("extended");
        $('#a3').animate({opacity: '0'},300);
      }
});

Answer 1

通过创建一个可用于每个点击事件处理程序的回调函数，您将摆脱代码的大部分内容，因为它们是相同的，除了选择器。这样你就不需要重复很多代码了。它变得更容易维护，不易出错，占用的空间更少。

Answer 2

缓存元素，例如：

  if ($('#one').hasClass("extended")) {
    $('#one').stop(true, true).animate({height: '22px'},500);
    $('#one').removeClass("extended");

更改为：

var one = $('#one');
  if (one.hasClass("extended")) {
    one.stop(true, true).animate({height: '22px'},500);
    one.removeClass("extended");
....
...

另一个提示是变量名称。不要将元素命名为one,two, t1, a2
为元素和变量赋予有意义的名称。

Answer 3

要避免使用特定ID复制相同代码，最重要的事情是将常用类名添加到窗口小部件或模块的不同组件中。

这使您可以运行saem代码来处理页面

中的窗口小部件的多个实例

简化示例，因为我无法看到您的标记以了解每个ID代表什么

$('.myMainWidgetClass').click(function(){
      var $thisWidget=$(this) ; /* store this instance of widget */
       /* remove active class on all the other main widgets*/
      $('.myMainWidgetClass.activeClass').removeClass('activeClass'); 
      /* add the active class to this instance*/
      $thisWidget.addClass('activeClass');  

     /* use find() to target elements only in this instance*/
      $thisWidget.find('.someSubClass').css('color','blue');
     /* to affect previous or next main widget assuming they are next element in page*/
      $thisWidget.prev().doSOmthing();/* or next()`

     /* get the index of this widget compared to all the same widgets in page*/         
       var thisIndex= $('.myMainWidgetClass').index(this) 

})

一旦你开始使用这些概念，有很多方法可以根据遍历，索引等目标选择器来编写更通用的代码

什么是一种更具编程效果的方法

3 个答案: