jQuery `.is (“: visible ”)` tidak berfungsi di Chrome

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>

Kode di atas berjalan mulus di Firefox, tetapi sepertinya tidak berfungsi di Chrome. Di Chrome itu menunjukkan .is(":visible") = falsebahkan ketika itu true.

Saya menggunakan versi jQuery berikut: jquery-1.4.3.min.js

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

Tampaknya :visiblepemilih jQuery tidak berfungsi untuk beberapa elemen sebaris di Chrome. Solusinya adalah menambahkan gaya tampilan, suka "block"atau "inline-block"untuk membuatnya berfungsi.

Perhatikan juga bahwa jQuery memiliki definisi yang agak berbeda tentang apa yang terlihat daripada banyak pengembang:

Elemen dianggap terlihat jika mereka menggunakan ruang dalam dokumen.
Elemen yang terlihat memiliki lebar atau tinggi yang lebih besar dari nol.

Dengan kata lain, suatu elemen harus memiliki lebar dan tinggi yang tidak nol untuk mengkonsumsi ruang dan terlihat.

Elemen dengan visibility: hiddenatau opacity: 0dianggap terlihat, karena masih mengkonsumsi ruang dalam tata letak.

Di sisi lain, bahkan jika visibilityitu diatur ke hiddenatau opacity adalah nol, itu masih :visibleke jQuery karena mengkonsumsi ruang, yang dapat membingungkan ketika CSS secara eksplisit mengatakan visibilitasnya disembunyikan.

Elemen yang tidak ada dalam dokumen dianggap tersembunyi; jQuery tidak memiliki cara untuk mengetahui apakah mereka akan terlihat ketika ditambahkan ke dokumen karena itu tergantung pada gaya yang berlaku.

Semua elemen opsi dianggap tersembunyi, apa pun kondisinya.

Selama animasi yang menyembunyikan elemen, elemen tersebut dianggap terlihat sampai akhir animasi. Selama animasi untuk menunjukkan elemen, elemen dianggap terlihat pada awal animasi.

Cara mudah untuk melihatnya, adalah bahwa jika Anda dapat melihat elemen di layar, bahkan jika Anda tidak dapat melihat kontennya, itu transparan dll., Itu terlihat, yaitu itu memakan ruang.

Saya membersihkan sedikit markup Anda dan menambahkan gaya tampilan ( yaitu mengatur tampilan elemen ke "blok" dll ), dan ini berfungsi untuk saya:

BIOLA

Referensi API resmi untuk :visible

Pada jQuery 3, definisi :visibletelah sedikit berubah

jQuery 3 sedikit mengubah arti :visible(dan karenanya :hidden).
Dimulai dengan versi ini, elemen akan dipertimbangkan :visiblejika mereka memiliki kotak tata letak, termasuk yang memiliki lebar nol dan / atau tinggi. Misalnya, brelemen dan elemen sebaris tanpa konten akan dipilih oleh :visiblepemilih.

Saya tidak tahu mengapa kode Anda tidak berfungsi pada chrome, tetapi saya sarankan Anda menggunakan beberapa solusi:

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

atau

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

Jika Anda yakin bahwa jQuery memberi Anda beberapa hasil buruk di chrome, Anda bisa mengandalkan pemeriksaan aturan css:

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

Plus, Anda mungkin ingin menggunakan jQuery terbaru karena mungkin ada bug dari versi yang lebih lama diperbaiki.

Ada kasus aneh di mana jika elemen diatur ke display: inline pemeriksaan jQuery untuk visibilitas gagal.

Contoh:

CSS

#myspan {display: inline;}

jQuery

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

Untuk memperbaikinya Anda dapat menyembunyikan elemen di jQuery dan daripada show/hideatau toggle()seharusnya berfungsi dengan baik.

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

Saya menganggap itu ada hubungannya dengan kekhasan dalam HTML kami karena tempat lain pada halaman yang sama berfungsi dengan baik.

Satu-satunya cara saya dapat menyelesaikan masalah ini adalah dengan melakukan:

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

Jika Anda membaca dokumen jquery, ada banyak alasan untuk sesuatu yang tidak dianggap terlihat / disembunyikan:

Mereka tidak memiliki nilai tampilan CSS.

Mereka adalah elemen bentuk dengan tipe = "tersembunyi".

Lebar dan tinggi mereka secara eksplisit diatur ke 0.

Elemen leluhur disembunyikan, sehingga elemen tidak ditampilkan di halaman.

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

Berikut adalah contoh jsfiddle kecil dengan satu elemen terlihat dan satu tersembunyi:

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox ...

Fungsi Lintas Peramban "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;
    }
}

Contoh lengkap:

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

Salam,

Fernando

Secara umum saya menjalani situasi ini ketika orang tua dari objek saya disembunyikan. misalnya ketika html seperti ini:

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

jika Anda bertanya apakah anak terlihat seperti:

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

itu akan mengembalikan false karena induknya tidak terlihat sehingga div tidak akan terlihat juga.

Solusi lintas browser / versi untuk menentukan apakah suatu elemen terlihat, adalah dengan menambahkan / menghapus kelas css ke elemen pada acara / sembunyikan. Keadaan default (terlihat) elemen dapat misalnya seperti ini:

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

Kemudian pada hide, hapus kelas:

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

Pada acara, tambahkan lagi:

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

Kemudian untuk menentukan apakah elemen tersebut terlihat, gunakan ini:

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

Ini juga memecahkan implikasi kinerja, yang mungkin terjadi pada penggunaan pemilih ": terlihat" yang berat, yang ditunjukkan dalam dokumentasi jQuery:

Menggunakan pemilih ini sangat dapat memiliki implikasi kinerja, karena dapat memaksa browser untuk merender ulang halaman sebelum dapat menentukan visibilitas. Melacak visibilitas elemen melalui metode lain, menggunakan kelas misalnya, dapat memberikan kinerja yang lebih baik.

Dokumentasi API jQuery resmi untuk pemilih ": terlihat"

Saya menambahkan style berikutnya pada parent dan .is (": visible") berfungsi.

display: inline-block;

Jika suatu item adalah anak dari item yang disembunyikan adalah (": terlihat") akan mengembalikan true, yang tidak benar.

Saya baru saja memperbaiki ini dengan menambahkan "display: inherit" ke item anak. Ini akan memperbaikinya untuk saya:

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

dan CSS:

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

Sekarang item dapat dinyalakan dan dimatikan secara efektif dengan mengubah visibilitas induk, dan $ (elemen) .is (": terlihat") akan mengembalikan visibilitas item induk

Ini adalah potongan kode dari jquery.js yang dieksekusi ketika is (": visible") dipanggil:

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 );
    };
}

Seperti yang Anda lihat, ia menggunakan lebih dari sekedar properti tampilan CSS. Ini juga tergantung pada lebar dan tinggi konten elemen. Karenanya, pastikan elemen memiliki lebar dan tinggi. Dan untuk melakukan ini, Anda mungkin perlu mengatur properti tampilan ke "inline-block"atau "block"

Saya perlu menggunakan visibility: hidden insted display: none karena visibilitas mengambil peristiwa, sementara layar tidak.

Jadi saya lakukan .attr('visibility') === "visible"