jQuery `.is (": видимий ")` не працює в 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>

Вищевказаний код працює в Firefox, але, здається, не працює в Chrome. У Chrome він показує .is(":visible") = falseнавіть коли він є true.

Я використовую таку версію jQuery: jquery-1.4.3.min.js

Посилання на jsFiddle: http://jsfiddle.net/WJU2r/4/

Здається, :visibleселектор jQuery не працює для деяких вбудованих елементів у Chrome. Рішення полягає в тому, щоб додати стиль відображення, як-от "block"або "inline-block"змусити його працювати.

Також зауважте, що jQuery має дещо інше визначення того, що видно, ніж багато розробників:

Елементи вважаються видимими, якщо вони займають місце в документі.
Видимі елементи мають ширину або висоту, що перевищує нуль.

Іншими словами, елемент повинен мати ненульову ширину і висоту, щоб споживати простір і бути видимим.

Елементи з visibility: hiddenабо opacity: 0вважаються видимими, оскільки вони все ще займають місце в макеті.

З іншого боку, навіть якщо його visibilityвстановлено hiddenабо непрозорість дорівнює нулю, це все-таки :visiblejQuery, оскільки він забирає простір, що може заплутати, коли CSS прямо говорить, що його видимість прихована.

Елементи, які відсутні в документі, вважаються прихованими; jQuery не має можливості знати, чи вони будуть видимі при додаванні до документа, оскільки це залежить від застосовних стилів.

Усі елементи опції вважаються прихованими, незалежно від обраного стану.

Під час анімації, що приховує елемент, елемент вважається видимим до кінця анімації. Під час анімації для показу елемента елемент вважається видимим на початку в анімації.

Найпростіший спосіб поглянути на це - це те, що якщо ви можете бачити елемент на екрані, навіть якщо ви не бачите його вмісту, він прозорий і т. Д., Він видно, тобто займає місце.

Я трохи очистив вашу розмітку і додав стиль відображення ( тобто встановлення елементів відображення на "блокувати" тощо ), і це працює для мене:

ПІДТВОРЕННЯ

Офіційна довідка API для :visible

Станом на jQuery 3, визначення :visibleдещо змінилося

jQuery 3 трохи змінює значення :visible(і, отже, :hidden).
Починаючи з цієї версії, елементи будуть розглянуті, :visibleякщо вони мають будь-які вікна компонування, включаючи нульову ширину та / або висоту. Наприклад, brелементи та вбудовані елементи без вмісту будуть обрані :visibleселектором.

Я не знаю, чому ваш код не працює на хромі, але я пропоную вам скористатися деякими методами вирішення:

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

або

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

Якщо ви впевнені, що jQuery дає хронні результати, ви можете просто покластися на перевірку правила css:

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

Крім того, ви можете використовувати останню jQuery, оскільки в ній можуть бути виправлені помилки старішої версії.

Є дивний випадок, коли, якщо елемент встановлений display: inlineу jQuery, перевірка на видимість не вдається.

Приклад:

CSS

#myspan {display: inline;}

jQuery

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

Щоб виправити це, ви можете приховати елемент у jQuery і ніж show/hideабо toggle()повинен працювати добре.

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

Я припускаю, що це має щось спільне з приворотом у нашому HTML, оскільки інші місця на одній сторінці працюють просто чудово.

Єдиний спосіб мені вдалося вирішити цю проблему:

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

Якщо ви читаєте документи jquery, є чимало причин, щоб щось не вважалося видимим / прихованим:

У них CSS-значення відображення - жодне.

Вони є елементами форми з типом = "приховано".

Їх ширина і висота явно встановлені на 0.

Елемент предка прихований, тому елемент не відображається на сторінці.

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

Ось невеликий приклад jsfiddle з одним видимим та одним прихованим елементом:

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox ...

Функція крос-браузера "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;
    }
}

Повний приклад:

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

З повагою,

Фернандо

Взагалі я живу цією ситуацією, коли батько мого об’єкта приховано. наприклад, коли html такий:

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

якщо ви запитаєте, чи видно дитину:

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

він повернеться хибним, оскільки його батьків не видно, щоб також не було видно div nava.

Рішення для перехресного веб-переглядача / версії для визначення того, чи є елемент видимим, полягає в тому, щоб додати / видалити клас css до елемента в показі / прихованні. Типовий (видимий) стан елемента може бути, наприклад, таким:

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

Потім прихойте, видаліть клас:

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

У показі додайте його ще раз:

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

Потім для визначення видимості елемента скористайтеся цим:

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

Це також вирішує наслідки для продуктивності, які можуть виникнути при великому використанні селектора ": видима", які вказані в документації jQuery:

Сильне використання цього селектора може мати наслідки для продуктивності, оскільки це може змусити браузер повторно відобразити сторінку, перш ніж він зможе визначити видимість. Відстеження видимості елементів за допомогою інших методів, наприклад, за допомогою класу, може забезпечити кращу продуктивність.

Офіційна документація jQuery API для селектора ": видима"

Я додав наступний стиль на батьківський і .is (": видимий") працював.

дисплей: вбудований блок;

Якщо елемент є дочірньою частиною, прихований елемент (": видимий") поверне вірно, що невірно.

Я щойно це зафіксував, додавши до дочірнього елемента "display: nasledit". Це виправить це для мене:

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

і CSS:

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

Тепер елемент можна ефективно включати і вимикати, змінюючи видимість батьківського виду, а $ (елемент) .is (": видимий") поверне видимість батьківського елемента

Це фрагмент коду з jquery.js, який виконується, коли (": видимий") називається:

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

Як бачите, він використовує більше, ніж просто властивість відображення CSS. Це також залежить від ширини та висоти вмісту елемента. Отже, переконайтеся, що елемент має деяку ширину та висоту. Для цього вам може знадобитися встановити властивість відображення на "inline-block"або "block"

Мені потрібно використовувати видимість: приховане введення відображення: жодне, тому що видимість сприймає події, а показ - ні.

І я також .attr('visibility') === "visible"