Tanadagi elementlardan boshqa barcha narsani bulg'amang

Yuklab olish animatsiyasi tashqari ekranda hamma narsani bulg'ashga harakat qilaman. Men buni sinab ko'rdim.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

$("#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. Load. 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>
</div> </div>

Men ham sinab ko'rdim

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

va u hech qachon ishlamaydi ... Yaxshi echim bormi?

15
Buni sinab ko'ring $ ('body') emas, balki ("# loading") CSS ("filter", "blur (3px)");
qo'shib qo'ydi muallif rahulsm, manba

6 javoblar

Muammo sizning tanlovingiz barcha body elementlari ustida ishlaydi va undan so'ng yuklash identifikatori bo'lmaganlarni tanlaydi. Faqat bitta body elementi bo'lgani uchun va u, albatta, bu identifikator yo'q, tanlangan. Albatta, bu siz xohlagan narsa emas. Siz barcha bolalarni ni body elementini tanlashni istaysiz va keyin yuklash identifikatoriga ega bo'lmaganlarni filtrlashni xohlaysiz.

The selector needs to be body > *:not(#loading).

To clarify: this selector selects all elements (*)...
...that are children of the body (body > *)
...and do not have ID loading (*:not(#loading)).

Bu bolalar tanlash vositasidan ( spec ) va noto'g'ri pseudo-class : emas() ( spec).

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

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>

A paragraph.
</div> </div>

20
qo'shib qo'ydi
$ ("body" *: not (#loading) "). CSS (" filter "," blur (3px) "); nima uchun?
qo'shib qo'ydi muallif pwan, manba
Nima uchun hozir ishlayotganini bilmayman ...
qo'shib qo'ydi muallif pwan, manba
Men buni javobimda tushuntirishga harakat qildim. Hali ham aniqlik beradigan biror narsa bormi?
qo'shib qo'ydi muallif Just a student, manba

Buni sinab ko'ring

Bunga faqat CSS yordamida erishish mumkin. JQUERYga kerak emas

Iltimos, quyidagi kodni ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

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>

A paragraph.

</div> </div>

enter image description here

8
qo'shib qo'ydi
@Pwan - yuqoridagi kodni ko'ring
qo'shib qo'ydi muallif prog1011, manba

Afsuski, HTML tugunni o'z farzandlarini bulg'anishsiz blurlay olmaysiz .

Bitta echim tarkibni qo'yish va rasmni ikkita div s-da div ichida quyidagi kabi joylashtirishdir.

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

Faqatgina $ ('# fon') CSS ('filter', 'blur (3px)) ni o'chirish/o'chirish uchun.

6
qo'shib qo'ydi
Yuqorida keltirilgan boshqa echimlar yaxshi, lekin tanani tanlashda nima uchun ishlamayotganini tushuntirish uchun +1.
qo'shib qo'ydi muallif mr.mams, manba

Buni ko'ring,

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

Men o'zgartirdim, sintaksisi qanday ishladi. Umid qilamanki bu yordam.

3
qo'shib qo'ydi
Bu butun tanani qoralaydi va savolga javob bermaydi.
qo'shib qo'ydi muallif Just a student, manba

Bu oddiy. Quyidagilarni tekshirib ko'ring:

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

Yuqoridagi tanlov idni yuklashda bo'lgan elementdan tashqari barcha tanani tanlab oladi.

Lekin sintaksisni tuzatdim, lekin bu yuklanishdan boshqa narsa emas, chunki tanada bo'lgan barcha narsa bulanadi. O'zingizning HTML tuzilishingizni o'zgartirishingiz kerak:

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

Endi jquery-da siz quyidagilarni amalga oshirishingiz mumkin:

 $('#bodyContainer').css("filter","blur(3px)");
1
qo'shib qo'ydi
@Pwan - Yangilangan javobni ko'rsating
qo'shib qo'ydi muallif Muhammad Qasim, manba
Bu butun tanani qoralaydi va savolga javob bermaydi.
qo'shib qo'ydi muallif Just a student, manba

Bu men uchun ishladi:

body > *:not(#loading > *){
    filter: blur(3px);
}
1
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb