0

シンプルなアコーディオン タイプのサイド メニューを作成しました。コードの量と実行時間を削減するために、どのような方法を学ぶことができますか?

私は主に学習ポイントとしてこれを求めています。

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

3 に答える 3

2

すべてのクリック イベント ハンドラーに使用できる単一のコールバック関数を作成することで、コードの大部分を取り除くことができます。これらはセレクターを除いて同一であるためです。そうすれば、多くのコードを繰り返す必要がなくなります。保守が容易になり、エラーが発生しにくくなり、スペースが大幅に削減されます。

于 2012-10-30T12:31:43.617 に答える
1

要素をキャッシュします。例:

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

もう 1 つのヒントは、変数名です。要素に名前を付けないone,two, t1, a2
要素と変数に意味のある名前を付けます。

于 2012-10-30T12:31:19.733 に答える
1

特定の 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) 

})

これらの概念を使い始めると、トラバーサル、インデックス作成などに基づいてセレクターをターゲットにして、より普遍的なコードを作成する方法がたくさんあります。

于 2012-10-30T12:46:02.053 に答える