模糊身体中除一个元素外的所有元素答案

【问题标题】：Blur all but one element in the body模糊身体中除一个元素外的所有元素
【发布时间】：2017-03-16 07:14:17
【问题描述】：

我正在尝试模糊屏幕上的所有内容，加载动画除外。这是我尝试过的。

$("#addall").click(function() {
  $('#loading').show();
  $('body:not(#loading)').css("filter", "blur(3px)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
  <div class="active dimmer">
    <div class="text loader">Loading...</div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>

我也试过了

$("body").each(function(event) {
    if (event.target.id != "loading") {
        $(this).css("filter","blur(3px)");
    }
});

而且它永远不会起作用...有什么好的解决方案吗？

【问题讨论】：

试试这个，$('body').not("#loading").css("filter","blur(3px)");

标签： javascript jquery

【解决方案1】：

试试这个

您只能使用 css 来实现这一点。无需查询

请看下面的代码

body > *:not(#loading) {
  filter: blur(3px);
}

<div>Some DIV.</div>
<div id="loading">Loading DIV
    <div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

【讨论】：

【解决方案2】：

问题是您的选择器适用于所有body 元素，然后选择那些没有ID loading 的元素。由于只有一个body 元素并且它确实没有这个ID，所以它被选中。当然，这不是你想要的。您想选择body 元素的所有子元素，然后过滤那些没有loading ID 的子元素。

选择器必须是body > *:not(#loading)。

澄清一下：此选择器选择所有元素 (*)...
...是身体的孩子 (body > *)
...并且没有加载 ID (*:not(#loading))。

这使用child selector (spec) 和negation pseudo-class :not() (spec)。

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}

<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

【讨论】：

$('body>*:not(#loading)').css("filter","blur(3px)"); 仍然模糊一切。为什么？
@Pwan 我试图在我的回答中解释它。还有什么我可以澄清的吗？
太棒了！谢谢！

【解决方案3】：

这对我有用：

body > *:not(#loading > *){
    filter: blur(3px);
}

【讨论】：

太棒了！谢谢！

【解决方案4】：

这很简单。请尝试以下操作：

$('body').not("#loading").css("filter","blur(3px)");

上面的选择器选择了除了id加载的元素之外的整个主体。

但是我已经更正了语法，但是除了加载之外不会模糊，因为正文下的所有内容都会模糊。您必须更改您的 html 结构，例如：

 <body>
    <div id="loading">Here your logic image..text or whatever</div>
    <div id="bodyContainer">Your whole html that was in your body</div>
 </body>

现在在 jquery 中您可以执行以下操作：

 $('#bodyContainer').css("filter","blur(3px)");

【讨论】：

这模糊了整个身体，不回答问题。

【解决方案5】：

如果有人仍然对此摸不着头脑，尽管提供了答案。您必须开始将通配符从直接父级模糊到您想要不模糊的子级。就我而言，我必须这样做：

body.modal-open > #wrapper > #page-content-wrapper > #app > div > *:not(#newApplicationModal)

因为如果我已经完成了

body.modal-open > *:not(#newApplicationModal)

它仍然模糊了一切，因为 body 的嵌套子项是我想要的未模糊项的父容器，导致父项被模糊，内容也随之模糊。

【讨论】：

【解决方案6】：

不幸的是you cannot blur an HTML node without blurring its children。

一种解决方案是将您的内容和加载图像放在父 div 内的两个 divs 中，如下所示。

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
    <div id="loading">Spinner...</div>
</div>

要模糊/取消模糊，只需执行$('#background').css('filter', 'blur(3px))。

【讨论】：

上面描述的其他解决方案都很好，但是 +1 用于解释为什么它在选择正文时不起作用。

【解决方案7】：

试试这个，

$("#addall").click( function() {
    $('#loading').show();
    $('body').not("#loading").css("filter","blur(3px)");
});

我改变了，语法的工作方式。希望这会有所帮助。

【讨论】：

这模糊了整个身体，不回答问题。