jquery 模糊主体中除一个元素外的所有元素

tf7tbtn2 于 2023-01-30 发布在 jQuery

关注(0)|答案(8)|浏览(124)

我试着模糊屏幕上的一切，除了加载动画。这是我已经尝试。

$("#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)");
    }
});

而且从来没有成功过...有什么好的解决办法吗？

jquery

来源：https://stackoverflow.com/questions/42827504/blur-all-but-one-element-in-the-body

8条答案

按热度按时间

drkbr07n1#

问题是选择器作用于所有body元素，然后选择没有ID loading的元素。由于只有一个body元素，而且它确实没有这个ID，所以它被选中。这不是你想要的。你想要选择body元素的所有子元素，然后过滤掉那些没有loading ID的子元素。
选择器必须为body > *:not(#loading)。
澄清一下：此选择器选择所有元素（*）...
...是主体的子项（body > *）
...并且没有ID加载（*:not(#loading)）。
这里使用child selector（规格）和negation pseudo-class :not()（规格）。

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>

赞(0）回复(0）举报 2023-01-30

5us2dqdw2#

试试这个

你可以只使用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>

赞(0）回复(0）举报 2023-01-30

hpxqektj3#

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

<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))。

赞(0）回复(0）举报 2023-01-30

h79rfbju4#

试试这个

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

我已经改变了语法的工作方式。希望这对你有帮助。

赞(0）回复(0）举报 2023-01-30

4ktjp1zp5#

如果有人仍然在为这个问题挠头，尽管已经给出了答案，那么你必须从直接父节点到你想要的子节点开始通配符模糊处理，在我的例子中，我必须这样做：

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

因为如果我只是

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

它仍然模糊了所有内容，因为body的嵌套子项是我想要的未模糊项的父容器，导致父容器模糊，内容也沿着模糊。

赞(0）回复(0）举报 2023-01-30

plicqrtu6#

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

$('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)");

赞(0）回复(0）举报 2023-01-30

mkh04yzy7#

这对我很有效：

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

赞(0）回复(0）举报 2023-01-30

zc0qhyus8#

从2023年开始提供更好的解决方案

我使用backdrop-filter: blur()而不是filter: blur()来确保.backdrop后面的元素是模糊的，而不是元素本身。
我希望代码是不言自明的（CodePen上的完整代码）。但是对于那些想知道的人，它只是将.backdrop放置在使用position: fixed;和z-index:9998;的所有元素上。然后使用z-index: 9999;将.except放置在.backdrop上，z-index: 9999;比.backdrop高一级，但仅使用position: relative;，因此It "它在和以前一样的地方。

- 这样你就可以模糊除所需元素外的所有内容，包括背景，并且你不需要以这种方式将.except元素重新定位到其他位置。**

如果我错过了什么就告诉我。

.except {
    background: white;
    position: relative;
    z-index: 9999;
}

.backdrop {
    position: fixed;
    z-index: 9998;
    top: 0; bottom: 0; left: 0; right: 0;
    background: #33333377;
    backdrop-filter: blur(4px);
}

<div class="wrap">
    <div class="content">Some text</div>  
    <div class="content except">Some text</div>  
    <div class="content">Some text</div>
    <div class="content">Some text</div> 
</div>

<div class="backdrop"></div>

在CodePen上演示完整代码

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 模糊主体中除一个元素外的所有元素

8条答案

从2023年开始提供更好的解决方案

相关问题

热门标签

最新问答