什麼將是一個更具編程有效的方式做到這一點

我已經建立了一個簡單的手風琴類型的側面菜單，並看着它，它是非常沉重的。我可以通過哪些方法來減少代碼量和執行時間？什麼將是一個更具編程有效的方式做到這一點

我主要問這是一個學習點。

$('#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); 
     } 
});

來源

2012-10-30 zomboble

如果CSS3動畫是一個選項，你會考慮使用它們嗎？ –

@JeffreySweeney我想，我沒有真正看過CSS3動畫，但我想像IE7 +可能8不會玩球？ – zomboble

@zombole事實上，即使IE 9不能。訣竅是讓手風琴工作（跳到位置），而不管動畫是否工作。它更易於維護。但是，鑑於這是一個家庭作業問題，我假設你的教授要求製作手風琴的動畫高於一切。 –

通過創建可用於每個點擊事件處理程序的單個回調函數，您將擺脫大部分代碼，因爲它們與選擇器相同。這樣你就不需要重複很多代碼。維護變得更容易，容易出錯，並佔用更少的空間。

來源

2012-10-30 12:31:43

緩存中的元素，例如：

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
賦予元素和變量有意義的名稱。

來源

2012-10-30 12:31:19 gdoron

嘿，謝謝你的評論，'緩存'的元素提高執行或更多的編程概念/整潔和更可讀代碼的東西？是的，你對命名約定的權利！我需要開始正確地做，而不僅僅是當我可以被打擾的時候：P我正在大力嘗試提高我的標準。 – zomboble

@zomboble每次你調用jquery來訪問一個元素時，它都會構造一個對象。通過調用一次並將其保存到一個變量中，您可以創建一次該對象，然後在每次需要引用該元素時重用該對象。當你在循環中使用它，或者在觸發很多事件時，如在滾動中使用它時，這一點尤其重要。 –

@IsaacFife。不準確，緩存jQuery對象保存DOM查詢。 – gdoron

爲避免使用特定ID重複使用相同的代碼，最重要的是要將常用類名稱添加到小部件或模塊的不同組件中。

這使您能夠運行SAEM代碼來處理控件的多個實例在頁面

Simpified例子，因爲我看不到您的標記知道每個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) 

})

一旦你開始使用這些概念有很多方法來基於遍歷，索引等目標選擇器來編寫更通用的代碼

來源

2012-10-30 12:46:02 charlietfl

什麼將是一個更具編程有效的方式做到這一點

回答

相關問題