javascript - クリックすると、同じクラス名の他の要素を非表示にします

Question

同じクラス名「dp-check」のhtmldivが10個あり、これをコンポーネントとして使用していて、同じページで何度も使用しています。今私の問題は、最初にそれらの1つをクリックするとすべてのdivが非表示になり、次にその「表示」が「インライン」（そのインスタンスのみ）に設定され、他のすべてが非表示になることです。同じクラス名の他のdivがあれば閉じたいです。が表示されるか、ページ上の別の場所がクリックされます。

Answer 1

これを試して：

function clickHandler(e){
    e = e || window.event;
    var elements = document.getElementsByClassName('dp-check');
    for(var i = 0; i < elements.length; i++){
        elements[i].style.display = 'none'; // Hide all elements.
    }
    e.target.style.display = 'inline'; // Show the clicked element.
}

clickHandler要素のクリック イベントにを割り当てる必要があります。

Answer 2

dp-checkページのどこか他の場所がjQueryでクリックされたときに、すべてのdivを非表示にすることができます:

$('body').click(function (event) {
  var $target = $(event.target);
  if(!$target.hasClass("dp-check") ) {
    $("dp-check").css('display','none');
  }
}