-1

jQuery を使用して、ユーザーが DIV の外側をクリックしたときに DIV を非表示にします

レビューが良さそうなので使ってみたいのですが、よくわかりません。誰か説明してくれませんか？.has()指定された子を持つ要素を返すことは知っていますが、関数はそれをどのように処理していますか?

4

2 に答える 2

3

これは、他の質問の回答のコードです。

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (container.has(e.target).length === 0)
    {
        container.hide();
    }
});

最初に知っておく必要があるのは、ブラウザーのイベントがどのように機能するかです。ほとんどの場合、それらは最初にイベントをトリガーした要素から、その祖先要素を経由してドキュメント自体まで「バブル」します。このプロセスはイベント伝播と呼ばれます。

したがって、次の HTML があるとします。

<body>
    <div>
        <a href="#">Click me!</a>
    </div>
</body>

次に要素をクリックすると、その要素<a>によってイベントがトリガーされますが、 、次に、そして.<a><div><body><document>

イベント ハンドラーを にバインドした場合document、アンカーをクリックすると、そのイベント ハンドラー関数が引き続きトリガーされます。これは、イベントがバブル アップし、最終的にドキュメントによって処理されるためです。これは、上記のコードの基本原則です。

では、実際のイベント ハンドラ関数を見てみましょう。eイベント自体である1 つの引数があります。そのオブジェクトには、target最初にイベントをトリガーした要素であるプロパティがあります。

簡単な HTML の例に戻ると、<a>要素をクリックe.targetすると、イベントがドキュメント レベルで処理されている場合でも、そのアンカーになります。thisこれは、イベントを処理する要素 (この場合は ) となる jQuery イベント ハンドラー関数内とは異なりdocumentます。

最初の行は非常に単純です。内部のクリックを無視したい要素を選択するだけです。

このifステートメントは少し難しいところですが、本質的には、「このイベントを最初にトリガーした要素がコンテナーの子孫でない場合は、コンテナーを非表示にする」ということです。

このcontainer.has(e.target)部分は、「イベントをトリガーした要素はコンテナー内にありますか?」をチェックしています。その答えが「はい」の場合、lengthプロパティはより大きくなります0(正確には1、単一の要素を含む jQuery オブジェクトで開始したためです)。

答えが「いいえ」の場合、lengthプロパティは と等しくなり0ます。これが実際に確認したいことなので、length物件を0私たちのif状態と比較します。

于 2013-02-13T16:46:39.440 に答える
-1

このコードをチェックしてください:

if ($(".myClass").length === 0){
  //Do stuff
}

これにより、返された jQuery オブジェクトに要素が含まれているかどうかがチェックされます。.length要素の数を返します。したがって、長さが 0 に等しいかどうかを確認すると、オブジェクトが空かどうかに関係なくブール値が得られます。

同様に、次のようにして反対のことを行うことができます

if ($(".myClass").length > 0){
  //Do stuff
}

また、0 より大きい数値は に評価されtrue、0 は に評価されるためfalse、次のように単純化できます。

if ($(".myClass").length){
  //Contains elements
}else{
  //No elements
}
于 2013-02-13T16:31:30.713 に答える