javascript - 单击一个时隐藏具有相同类名的其他元素

Question

我有 10 个具有相同类名“dp-check”的 html div，我将其用作组件并在同一页面中多次使用。现在我的问题是，当我单击其中一个时，最初所有 div 都被隐藏，然后它的“显示”设置为“内联”（仅限该实例）并且所有其他 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');
  }
}