jQuery `.is (“: visible ”)` Chrome'da çalışmıyor

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>

Yukarıdaki kod Firefox'ta sorunsuz çalışıyor, ancak Chrome'da çalışmıyor gibi görünüyor. Chrome'da olduğu .is(":visible") = falsezaman bile gösterilir true.

Aşağıdaki jQuery sürümünü kullanıyorum: jquery-1.4.3.min.js

jsFiddle Bağlantısı: http://jsfiddle.net/WJU2r/4/

Görünüşe göre jQuery'nin :visibleseçici Chrome'daki bazı satır içi öğeler için çalışmıyor. Çözüm, gibi "block"veya görüntülemek için bir ekran stili eklemektir "inline-block".

Ayrıca, jQuery'nin, birçok geliştiriciden neyin görülebildiğinin biraz farklı bir tanımına sahip olduğunu unutmayın:

Öğeler, belgedeki alanı tüketirlerse görünür kabul edilir.
Görünür öğeler sıfırdan büyük bir genişliğe veya yüksekliğe sahiptir.

Başka bir deyişle, bir öğenin alanı tüketmesi ve görünür olması için sıfır olmayan bir genişliği ve yüksekliği olmalıdır.

Düzeni olan visibility: hiddenveya opacity: 0tükettiği için, öğeleri olan veya görünür olarak kabul edilirler.

Öte yandan, visibilityayarlanmış hiddenveya opaklık sıfır olsa bile, alan :visibletükettiği için jQuery için hala geçerlidir , bu da CSS görünürlüğünün gizli olduğunu açıkça söylediğinde kafa karıştırıcı olabilir.

Belgede olmayan öğeler gizli kabul edilir; jQuery, geçerli stillere bağlı olduğundan bir belgeye eklendiğinde görünüp görünmeyeceklerini bilmenin bir yolu yoktur.

Seçilen seçenek ne olursa olsun tüm seçenek öğeleri gizli kabul edilir.

Bir öğeyi gizleyen animasyonlar sırasında, öğenin animasyonun sonuna kadar görünür olduğu kabul edilir. Bir öğeyi göstermek için animasyonlar sırasında, öğenin animasyonun başlangıcında görünür olduğu kabul edilir.

Bakmanın kolay yolu, öğeyi ekranda görebiliyorsanız, içeriğini göremeseniz bile, şeffaftır, vb. Görünürdür, yani yer kaplar.

İşaretlemenizi biraz temizledim ve bir ekran stili ekledim ( örneğin, öğeleri "blok" vb. Olarak ayarlama ) ve bu benim için çalışıyor:

VAKTİNİ BOŞA HARCAMAK

İçin resmi API referansı :visible

JQuery 3 itibariyle, tanımı :visiblebiraz değişti.

jQuery 3, anlamını :visible(ve dolayısıyla :hidden) biraz değiştirir .
Bu sürümden başlayarak :visible, sıfır genişlik ve / veya yükseklik dahil olmak üzere herhangi bir düzen kutusu varsa öğeler dikkate alınacaktır . Örneğin, briçeriği olmayan öğeler ve satır içi öğeler :visibleseçici tarafından seçilecektir .

Kodunuzun neden krom üzerinde çalışmadığını bilmiyorum, ancak bazı geçici çözümler kullanmanızı öneririz:

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

veya

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

JQuery'nin kromda size bazı kötü sonuçlar verdiğinden eminseniz, sadece css kural kontrolüne güvenebilirsiniz:

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

Ayrıca, en son jQuery'yi kullanmak isteyebilirsiniz, çünkü eski sürümdeki hatalar düzeltilmiş olabilir.

Öğenin display: inlinejQuery olarak ayarlanması durumunda görünürlük kontrolünün başarısız olduğu garip bir durum vardır .

Misal:

CSS

#myspan {display: inline;}

jQuery

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

Bunu düzeltmek için öğeyi jQuery'de gizleyebilirsiniz ve daha iyi show/hideveya toggle()düzgün çalışmalıdır.

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

Aynı sayfadaki diğer yerler gayet iyi çalıştığı için HTML'deki bir tuhaflıkla ilgili bir şey olduğunu varsayıyorum.

Bu sorunu çözebilmemin tek yolu:

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

Jquery dokümanlarını okursanız, bir şeyin görünür / gizli olarak kabul edilmemesi için birçok neden vardır:

CSS görüntüleme değeri yok.

Bunlar, type = "hidden" olan form öğeleridir.

Genişlikleri ve yükseklikleri açıkça 0'a ayarlanmıştır.

Bir üst öğe gizlendiğinden öğe sayfada gösterilmiyor.

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

İşte bir görünür ve bir gizli öğeye sahip küçük bir jsfiddle örneği:

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox ...

Çapraz Tarayıcı işlevi "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;
    }
}

Tam örnek:

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

Saygılarımızla,

Fernando

Genellikle nesnemin üstü gizli olduğunda bu durumu yaşıyorum. örneğin html böyle olduğunda:

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

çocuğun aşağıdaki gibi görünür olup olmadığını sorarsanız:

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

div öğesi de görünmeyecek şekilde üst öğesi görünmediği için yanlış döndürür.

Bir öğenin görünür olup olmadığını belirlemek için çapraz tarayıcı / sürüm çözümü, show / hide öğesinde css sınıfı eklemek / kaldırmaktır. Öğenin varsayılan (görünür) durumu örneğin şöyle olabilir:

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

Sonra gizle üzerinde sınıfı kaldırın:

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

Şovda tekrar ekleyin:

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

Ardından öğenin görünür olup olmadığını belirlemek için şunu kullanın:

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

Bu aynı zamanda, jQuery belgelerinde belirtilen ": visible" seçicisinin yoğun kullanımında ortaya çıkabilecek performans sonuçlarını da çözer:

Bu seçicinin yoğun bir şekilde kullanılması performansla ilgili sonuçlar doğurabilir, çünkü tarayıcı görünürlüğü belirlemeden önce sayfayı yeniden oluşturmaya zorlayabilir. Örneğin bir sınıf kullanarak öğelerin görünürlüğünü diğer yöntemlerle izlemek daha iyi performans sağlayabilir.

": Visible" seçici için resmi jQuery API Belgeleri

Ebeveyne bir sonraki stil ekledim ve .is (": visible") çalıştı.

ekran: satır içi blok;

Bir öğe gizli bir öğenin alt öğesiyse (": visible") true değerini döndürür, bu yanlıştır.

Ben sadece alt öğe için "display: inherit" ekleyerek düzeltildi. Bu benim için düzeltir:

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

ve CSS:

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

Artık öğe, üst öğenin görünürlüğünü değiştirerek etkin bir şekilde açılıp kapatılabilir ve $ (element) .is (": visible"), üst öğenin görünürlüğünü döndürür

Bu, jquery.js'den (": visible") çağrıldığında çalıştırılan kod parçasıdır:

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

Gördüğünüz gibi, sadece CSS display özelliğinden daha fazlasını kullanıyor. Ayrıca, öğenin içeriğinin genişliğine ve yüksekliğine de bağlıdır. Bu nedenle, elemanın bir miktar genişlik ve yüksekliğe sahip olduğundan emin olun. Bunu yapmak için, display özelliğini "inline-block"veya "block"

Ben kullanımı gereken görünürlük: gizli Insted ekran: none çünkü görünürlük olaylarını alır iken ekran yapmaz.

Ben de öyle .attr('visibility') === "visible"