JavaScriptの項目を独立させる

Question

私はjQueryスクリプトを使ってページのdivを展開/折りたたんでいます。私は今、コードを複製しようとしているので、同じことをする2つのdivがありますが、それらを開く/閉じるの両方をクリックすると、それらを独立させたいと思います。ちょうど私が間違って何をしているのだろうか？事前に

(function($) { 

    jQuery(document).ready(function() { 

     Panel.init(); 


     $(document).on('click', '.tab-controller1, .tab-controller2', function() { 
      Panel.togglePanel(); 
     }); 

    }); 

    var Panel = { 

     isVisible : false, 
     showMessage : null, 
     hideMessage : null, 
     animationDuration : 300, 
     animationEasing : 'linear', 

     init: function() { 
      Panel.hidePanel(); 
     }, 

     hidePanel : function() { 
      $('.infoToggle1, .infoToggle2').animate({ 
       bottom : -(Panel.getAnimationOffset()) 
      }, Panel.animationDuration, Panel.animationEasing, function() { 
       Panel.isVisible = false; 
       Panel.updateTabMessage(); 
      }); 
     }, 

     showPanel : function() { 
      $('.infoToggle1, .infoToggle2').animate({ 
       bottom : 0 
      }, Panel.animationDuration, Panel.animationEasing, function() { 
       Panel.isVisible = true; 
       Panel.updateTabMessage(); 
      }); 
     }, 

     togglePanel : function() { 
      ((this.isVisible) ? this.hidePanel : this.showPanel)(); 
     }, 

     updateTabMessage : function() { 
      if (this.isVisible) { 
       $('.tab-controller1 .close, .tab-controller2 .close').show(); 
       $('.tab-controller1 .show, .tab-controller2 .show').hide(); 
      } else { 
       $('.tab-controller1 .close, .tab-controller2 .close').hide(); 
       $('.tab-controller1 .show, .tab-controller2 .show').show(); 
      } 
     }, 

     getAnimationOffset : function() { 
      return $('.panel-content1, .panel-content2').height(); 
     } 

    } 

})(jQuery); 

ありがとう：

<div class="infoToggle1"> 
     <div class="panel-controller"> 
      <div class="tab-controller1"> 
       <span class="close">CLOSE</span> 
       <span class="show">MORE INFO</span> 
      </div> 
     </div> 
     <div class="panel-content1"> 
      Content goes here 
     </div> 
    </div> 

    <div class="infoToggle2"> 
     <div class="panel-controller"> 
      <div class="tab-controller2"> 
       <span class="close">CLOSE</span> 
       <span class="show">MORE INFO</span> 
      </div> 
     </div> 
     <div class="panel-content2"> 
      Content goes here 
     </div> 
    </div> 

と、次のjQueryコード：

はこれまでのところ、私は、次のHTMLを持っています！

Answer 1

isVisibleといくつかのクラス名にそれぞれ独自の設定が必要なため、2つのPanelオブジェクトが必要です。そのためには、Panelオブジェクトをコンストラクタにして、数値（1または2）を渡すことができます。そのコンストラクタは、オブジェクトを元の状態に戻しますが、最初の要素構造にのみ適用される特殊性を返します。もう一方の番号でもう一度そのコンストラクターを呼び出すと、2番目の構造体を操作する（そしてその状態を維持する）必要があるオブジェクトを取得します。

あなたのコードは、（テストされていない）、このようになります。

(function($) { 

    jQuery(document).ready(function() { 
     var panel1 = new Panel(1), 
      panel2 = new Panel(2); 

     $(document).on('click', '.tab-controller1', function() { 
      panel1.togglePanel(); 
     }); 
     $(document).on('click', '.tab-controller2', function() { 
      panel2.togglePanel(); 
     }); 
    }); 

    // Constructor. Needs to get the number 1 or 2 
    function Panel(num) { 
     var that = this; // Remember the object that is created here 
     Object.assign(that, { 
      isVisible : false, 
      showMessage : null, 
      hideMessage : null, 
      animationDuration : 300, 
      animationEasing : 'linear', 

      init: function() { 
       that.hidePanel(); 
      }, 

      hidePanel : function() { 
       // Use number to address the correct class, here and below. 
       $('.infoToggle' + num).animate({ 
        bottom : -(that.getAnimationOffset()) 
       }, that.animationDuration, that.animationEasing, function() { 
        that.isVisible = false; 
        that.updateTabMessage(); 
       }); 
      }, 

      showPanel : function() { 
       $('.infoToggle' + num).animate({ 
        bottom : 0 
       }, that.animationDuration, that.animationEasing, function() { 
        that.isVisible = true; 
        that.updateTabMessage(); 
       }); 
      }, 

      togglePanel : function() { 
       (that.isVisible ? that.hidePanel : that.showPanel)(); 
      }, 

      updateTabMessage : function() { 
       if (that.isVisible) { 
        $('.tab-controller' + num + ' .close').show(); 
        $('.tab-controller' + num + ' .show').hide(); 
       } else { 
        $('.tab-controller' + num + ' .close').hide(); 
        $('.tab-controller' + num + ' .show').show(); 
       } 
      }, 

      getAnimationOffset : function() { 
       return $('.panel-content' + num).height(); 
      } 
     }); 
     // call init here, which will execute when you do `new Panel`: 
     that.init(); 
    } 
})(jQuery); 

Answer 2

クリック/クローズアニメーションにクラスセレクタを使用する代わりに、クリックしたアイテムに関連して要素を参照することに焦点を当ててください。

Answer 3

パネルの表示と非表示のコードを見てください。どちらも、あなたは次のものを持っています：

$('.infoToggle1, .infoToggle2') 

あなたのjQueryセレクター。このセレクターは両方のパネルを選択しており、両方で同時に.animate()を呼び出しています。どちらがクリックされたかの違いはわかりません。

解決策は、各ボタンにアニメーション化するコンテナを渡すことです。

$(document).on('click', '.tab-controller1', function() { 
     Panel.togglePanel('.infotoggle1'); 
    }) 
    .on('click', '.tab-controller2', function() { 
     Panel.togglePanel('.infotoggle2'); 
    }); 

そしてもちろんのjQueryのセレクタとして新しいパラメータを使用するようにPanel.togglePanel()を微調整。

確かにクイック/クリーナーの方法がありますが、これはあなたを開始する必要があります。