誰かがこのjqueryコードの動作を説明できます

Question

私はこのコードをオンラインで選択しましたが、どのように動作するのか理解できません。理解せずに私は私の使用のためにそれを編集することはできません。それは "x"ボタンをクリックするとアップスライドでパネルを閉じるためのものです。私はスクリプト内にエフェクトがどのように作成されているか知りたいですか？ここ はhtmlです：

<div class="col-md-3 col-sm-6 col-xs-6"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Using Slide Up</h3> 
      <span class="pull-right clickable" data-effect="slideUp">x</span> 
     </div> 
     <div class="panel-body">Panel content</div> 
     <div class="panel-footer">Panel footer</div> 
    </div> 
</div> 

これに取り組んスクリプトは次のとおりです。

$(function() { 
     $('.clickable').on('click', function() { 
      var effect = $(this).data('effect'); 
      $(this).closest('.panel')[effect](); 
     }); 
    }); 

Answer 1

$('.clickable') 

：また

$(this).closest('.panel').slideUp(); 

、私はあなたがjQueryのについて何かを読むことをお勧め：それはこのような何かに評価されます。それはクラスですべての要素をつかむ「クリック可能」（ドットがクラスを表す。それがあった場合は、「#clickable」それはクリッカブルのIDを持つ任意の要素を探します）すべてのあなたの選択した要素のための今すぐ

.on('click', function() { 
} 

、私たちはクリックイベントを結びつけています。選択された要素がクリックされると、関数が実行されます。この行で

var effect = $(this).data('effect'); 

、我々はデータプロパティの値を持つように、変数「効果」を設定している「データ・効果」キーワードを使用して、関数内で参照することができ、クリックされた要素（「から、この"）。 ".data"メソッドは、 "data-"という接頭辞が付いたすべてのプロパティを返します。

$(this).closest('.panel')[effect](); 

ここでは、今、（「この」を使用して関数内で参照することができ、覚えて、）私たちのクリックされた要素にクラス「パネル」と最も近い要素を探しています。

れる "効果" は変数であり、コード

.[effect]() 

は（HTMLでデータ・効果など= "slideUp"）をコードする（あなたの例で）同一である

.slideUp() 

JavaScriptでは、ドット表記またはブラケット表記のどちらかを同じ意味で使用できます。

希望します。

Answer 2

それは非常に簡単です。これがjQueryコードです。クラスclickableを持つすべての要素にバインドされたclickイベントがあります：

$('.clickable').on('click', function() {...}); 

次にあなたが持っているしたいと思いますどのような効果を知りたいです。そのためには、あなたがdata-effect属性値取る：終わり

var effect = $(this).data('effect'); // returns 'slideUp' 

を、あなたはそれに接続されているクラスpanelと最も近い要素までスライドします：

$(this).closest('.panel')[effect](); 

を私はこの部分を得ることを理解します理解するのは難しいです。ここでのトリックは、エフェクト名を変数に保持することです。そして、その名前のメソッドを.panel要素で呼びたいとします。これは、あなたがJSでそれを行う方法です。変数を大括弧で囲み、括弧を追加します。この方法で.slideUp()メソッドに呼び出します。これはあなたのjQueryのセレクタであるhttps://api.jquery.com/