IT-Swarm.Net

jQuery `.is (": vidljivo ")` ne radi u Chromeu

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

Gornji kôd glatko radi u Firefoxu, ali čini se da ne radi u Chromeu. U Chromeu pokazuje .is(":visible") = false čak i kad je true.

Koristim sljedeću verziju jQuery: jquery-1.4.3.min.js

link jsFiddle: http://jsfiddle.net/WJU2r/4/

197
Saad Bashir

Čini se da izbornik jQuery :visible ne radi za neke ugrađene elemente u Chromeu. Rješenje je dodati stil prikaza, poput "block" ili "inline-block" kako bi to djelovalo.

Također imajte na umu da jQuery ima nešto drugačiju definiciju onoga što je vidljivo od mnogih programera:

Elementi se smatraju vidljivim ako zauzimaju prostor u dokumentu.
Vidljivi elementi imaju širinu ili visinu veću od nule.

Drugim riječima, element mora imati ne-nulu širinu i visinu da bi trošio prostor i bio vidljiv.

Elementi s visibility: hidden ili opacity: 0 smatraju se vidljivima, jer još uvijek zauzimaju prostor u izgledu.

S druge strane, čak i ako je njegovo visibility postavljeno na hidden ili neprozirnost jednaka nuli, još uvijek je :visible na jQuery jer troši prostor, što može biti zbunjujuće kada CSS izričito kaže da je vidljivost skrivena.

Elementi koji nisu u dokumentu smatraju se skrivenim; jQuery nema načina znati hoće li biti vidljivi kada se dodaju dokumentu jer to ovisi o primjenjivim stilovima.

Svi elementi opcija smatraju se skrivenim, neovisno o odabranom stanju.

Tijekom animacija koje skrivaju element, smatra se da je element vidljiv do kraja animacije. Tijekom animacije za prikazivanje elementa smatra se da je element vidljiv na početku u animaciji.

Jednostavan način gledanja je da ako element možete vidjeti na zaslonu, čak i ako ne možete vidjeti njegov sadržaj, proziran je itd., Vidljiv je, tj. Zauzima prostor.

Malo sam očistio vašu oznaku i dodao stil prikaza (, tj. Postavljanje prikaza elemenata na "blokadu" itd. ), a ovo djeluje za mene:

ZAGONETKA

Službena API referenca za :visible


Od jQuery 3, definicija :visible neznatno se promijenila

jQuery 3 malo mijenja značenje :visible (i stoga :hidden).
Počevši s ovom verzijom, elementi će se smatrati :visible ako imaju bilo kakve okvire izgleda, uključujući one nulte širine i/ili visine. Na primjer, br elemente i umetnute elemente bez sadržaja bit će odabran selektorom :visible.

266
adeneo

Ne znam zašto vaš kôd ne radi na kromu, ali predlažem vam da koristite neke zaobilazne okvire:

$el.is(':visible') === $el.is(':not(:hidden)');

ili

$el.is(':visible') === !$el.is(':hidden');  

Ako ste sigurni da vam jQuery daje loše rezultate u kromu, možete se osloniti na provjeru pravila css:

if($el.css('display') !== 'none') {
    // i'm visible
}

Osim toga, možda biste htjeli koristiti najnoviji jQuery jer mogu imati ispravljene pogreške u starijoj verziji.

60
gion_13

Pretpostavljam da to ima neke veze s čudom u našem HTML-u, jer i druga mjesta na istoj stranici funkcioniraju u redu.

Jedini način koji sam uspio riješiti je bio:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}
8
Chris Dutrow

Postoji čudan slučaj kada ako je element postavljen na display: inline provjera vidljivosti jQuery ne uspije.

Primjer:

CSS

#myspan {display: inline;}

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

Da biste to popravili možete sakriti element u jQuery-u i tada show/hide ili toggle() treba raditi.

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});
8
Alex Rashkov

Internet Explorer, Chrome, Firefox ...

Funkcija križnog pretraživača "isVisible ()"

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

Potpuni primjer:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

Pozdrav,

Fernando

7
Fernando

Ako čitate dokumente jquery, postoje brojni razlozi da se nešto ne smatra vidljivim/skrivenim:

Imaju CSS vrijednost prikaza nijednu.

Oni su elementi oblika s tipom = "skriveno".

Njihova širina i visina izričito su postavljeni na 0.

Element predaka je skriven, tako da element nije prikazan na stranici.

http://api.jquery.com/visible-selector/

Evo malog primjera jsfiddle s jednim vidljivim i jednim skrivenim elementom:

http://jsfiddle.net/tNjLb/

7
xaxxon

Rješenje za preglednik/verziju za utvrđivanje je li element vidljiv jest dodavanje/uklanjanje css klase elementu na show/hid. Zadano (vidljivo) stanje elementa može biti na primjer ovako:

<span id="span1" class="visible">Span text</span>

Zatim skrivajte maknite klasu:

$("#span1").removeClass("visible").hide();

U emisiji dodajte ponovo:

$("#span1").addClass("visible").show();

Zatim odredite je li element vidljiv, upotrijebite ovo:

if ($("#span1").hasClass("visible")) { // do something }

Ovo također rješava implikacije na performanse, koje se mogu pojaviti pri velikom korištenju selektora ": vidljivo", koji su istaknuti u dokumentaciji jQueryja:

Često korištenje ovog odabirača može imati posljedice na performanse, jer može prisiliti preglednik da ponovo napravi stranicu prije nego što utvrdi vidljivost. Praćenje vidljivosti elemenata putem drugih metoda, na primjer pomoću klase, može pružiti bolje performanse.

Službena dokumentacija jQuery API-ja za izbornik:: vidljivo

3
Alex

Općenito živim u ovoj situaciji kada je roditelj mog objekta sakriven. na primjer, kada je HTML ovako:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

ako pitate da li je dijete vidljivo kao:

    $(".div-child").is(":visible");

vratit će se lažno jer njegov roditelj nije vidljiv tako da i div navint neće biti vidljiv.

3
cenk ebret

Na roditelju sam dodao sljedeći stil i .is (": vidljivo") je radio.

zaslon: linijski blok;

1
Horatiu

Trebam koristiti vidljivost: skriveno umjesto prikaz: nijedan jer vidljivost traje događaje, dok prikaz ne.

Tako radim .attr('visibility') === "visible"

0
mitjajez

Ovo je dio koda s jquery.js koji se izvršava kad se zove (": vidljivo"):

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

Kao što vidite, koristi više nego samo svojstvo CSS prikaza. To također ovisi o širini i visini sadržaja elementa. Dakle, osigurajte da element ima neku širinu i visinu. A za to ćete možda morati postaviti svojstvo prikaza na "inline-block" ili "block"

0
hkulur

Ako je stavka podređeno, stavka koja je skrivena je (": vidljivo"), pojavit će se true, što je netočno.

Upravo sam to ispravio dodajući "prikaz: nasljeđujem" djetetu stavku. To ću popraviti za mene:

<div class="parent">
   <div class="child">
   </div>
<div>

i CSS:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

Sada se stavka može učinkovito uključiti i isključiti promjenom vidljivosti roditelja, a $ (element) .is (": vidljivo") će vratiti vidljivost nadređene stavke

0
patrick