jquery divの周りをクリックしてdivを非表示にします

Web 開発では、要素をクリックしたときに別の要素を非表示にする機能を実装する必要があることがよくあります。これは、いくつかのインタラクティブなエフェクトを実装する場合に特に一般的です。この記事ではjQueryを使ってdivの周囲をクリックすると非表示にする機能を実装する方法を紹介します。

jQuery を使用してイベントを処理する

div の周囲をクリックしたときに div を非表示にする機能を実現するには、jQuery のイベント処理関数を使用する必要があります。 jQuery では、イベント バインドに .on() メソッドを使用できます。たとえば、クリック イベントをバインドするコードは次のとおりです:

$(document).on('click', function() {
  // 隐藏div的代码
});

このコードは、クリック イベントをドキュメント全体にバインドします。いずれかの要素がクリックされるとイベントがトリガーされます。

ターゲット div を決定する

次に、非表示にする div を決定する必要があります。この記事では、この div の ID が「target」であると仮定し、jQuery のセレクターを使用して取得できるとします。たとえば、この div を取得するコードは次のとおりです:

var targetDiv = $('#target');

クリック イベントの処理

クリック イベントが発生したとき、クリックされた要素がターゲット div の周囲にあるかどうかを確認する必要があります。そうでない場合、アクションはターゲット div を非表示にします。クリックされた要素がターゲット div の周囲にあるかどうかを判断するには、ページ座標、要素座標、要素サイズなど、jQuery のイベント オブジェクトによって提供されるプロパティを使用する必要があります。

クリック位置の取得

まず、クリック位置を取得する必要があります。 jQuery のイベント オブジェクトはページ座標と要素座標を提供します。pageX プロパティと pageY プロパティを使用してページ座標を取得し、offset() メソッドを使用して要素座標を取得できます。たとえば、マウス クリックの位置を取得するコードは次のとおりです。

$(document).on('click', function(e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
});

ターゲット div の位置とサイズを取得します

次に、ターゲットの位置とサイズを取得する必要があります。部offset()、outerWidth()、outerHeight() メソッドを使用して、ターゲット div の位置とサイズを取得できます。たとえば、対象の div を取得するコードは次のとおりです。

var targetDiv = $('#target');
var targetX = targetDiv.offset().left;
var targetY = targetDiv.offset().top;
var targetWidth = targetDiv.outerWidth();
var targetHeight = targetDiv.outerHeight();

クリックが対象の div の周囲であるかどうかを判定します。

クリック位置と対象の div の位置とサイズを使用して、クリックがターゲット div の周囲にあるかどうかを判断できます。判定方法は、マウスのクリック位置の横軸が対象divの左または右、または縦軸が対象divの上または下にある場合に、対象divの周囲でクリックしたとみなします。たとえば、クリックがターゲット div の周囲にあるかどうかを判断するコードは次のとおりです。

if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
  // 点击在目标div周围，需要隐藏目标div
} else {
  // 点击在目标div内部或边缘，不需要隐藏目标div
}

ターゲット div を非表示にする

最後に、クリックがターゲット div の周囲にない場合は、次のコードが必要です。対象の div を非表示にします。要素を非表示にするには、.hide() メソッドを使用します。たとえば、ターゲット div を非表示にするコードは次のとおりです:

targetDiv.hide();

完全なコード

最後に、上記のコードをすべて統合して、次のような完全なコードを取得します:

$(document).on('click', function(e) {
  var targetDiv = $('#target');
  var targetX = targetDiv.offset().left;
  var targetY = targetDiv.offset().top;
  var targetWidth = targetDiv.outerWidth();
  var targetHeight = targetDiv.outerHeight();
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  
  if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
    targetDiv.hide();
  }
});

div をクリックします。これは、周囲の div を非表示にすることで実現できます。

概要

この記事では、jQueryを使ってdiv付近をクリックした際にdivを非表示にする方法を紹介します。この機能を実現する鍵は、jQuery イベント処理と DOM 操作メソッドを使用し、jQuery のセレクターと属性を使用してターゲット div の位置とサイズを取得することです。このメソッドはボタンやポップアップ ウィンドウなどの他の要素に拡張でき、Web 開発に優れたインタラクティブな効果を提供します。

以上がjquery divの周りをクリックしてdivを非表示にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。