-1

当用户在 DIV 外部单击时，使用 jQuery 隐藏 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即事件本身。该对象有一个属性，target即最初触发事件的元素。

回到我们简单的 HTML 示例，如果您单击<a>元素，则该元素e.target将成为该锚点，即使在文档级别处理事件也是如此。这与thisjQuery 事件处理函数内部不同，后者将是处理事件的元素（在本例中为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 回答