jQuery `.is (": visible ")` не работает в Chrome

Question

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/

Answer 1

Кажется, селектор jQuery :visible не работает для некоторых встроенных элементов в Chrome.Решение состоит в том, чтобы добавить стиль отображения, например "block" или "inline-block", чтобы он работал.

Также обратите внимание, что jQuery имеет несколько иное определение того, что видно, чем многие разработчики:

Элементы считаются видимыми, если они занимают место в документе.
Видимые элементы имеют ширину или высоту больше нуля.

Другими словамиэлемент должен иметь ненулевую ширину и высоту, чтобы занимать пространство и быть видимым.

Элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете.

С другой стороны, даже если для visibility установлено значение hidden или непрозрачность равна нулю, он все равно :visible для jQuery, поскольку он занимает место, что может сбивать с толку, когдаCSS явно говорит, что его видимость скрыта.

Элементы, которых нет в документе, считаются скрытыми;У jQuery нет способа узнать, будут ли они видны при добавлении к документу, поскольку это зависит от применяемых стилей.

Все элементы параметров считаются скрытыми независимо от их выбранного состояния.

Во время анимации, которая скрывает элемент, элемент считается видимым до конца анимации.Во время анимации, чтобы показать элемент, элемент считается видимым в начале анимации.

Самый простой способ посмотреть на него, это то, что если вы видите элемент на экране, даже есливы не можете видеть его содержимое, оно прозрачное и т. д., оно видно, т. е. оно занимает место.

Я немного очистил вашу разметку и добавил стиль отображения (, т.е. установил отображение элементов на"блок" и т. д. ), и это работает для меня:

FIDDLE

Официальная ссылка API для :visible

---

Начиная с jQuery 3, определение :visible немного изменилось

jQuery 3 немного меняет значение :visible (и, следовательно, :hidden).
Начиная с этой версии, элементы будут считаться :visible, если у них есть какие-либо поля макета, в том числе с нулевой шириной и / или высотой.Например, селектор :visible выберет br элементы и встроенные элементы без содержимого.

Answer 2

Я не знаю, почему ваш код не работает на Chrome, но я предлагаю вам использовать некоторые обходные пути:

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

или

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

Если вы уверены, чтоJQuery дает вам некоторые плохие результаты в Chrome, вы можете просто положиться на проверку правила CSS:

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

Плюс, вы можете использовать последний JQuery , потому что он может иметь ошибки изболее старая версия исправлена.

Answer 3

Существует странный случай, когда, если элемент установлен на 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();
});

Answer 4

Я предполагаю, что это как-то связано с причудой в нашем HTML, потому что другие места на той же странице работают нормально.

Единственный способ решить эту проблему - это сделать:

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

Answer 5

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>

С уважением,

Фернандо

Answer 6

Если вы читаете документы jquery, существует множество причин, по которым что-то нельзя считать видимым / скрытым:

У них для CSS нет отображаемого значения.

Это элементы формы с type = "hidden".

Их ширина и высота явно установлены на 0.

Элемент-предок скрыт, поэтому элемент не отображается на странице.

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

Вот небольшой пример jsfiddle с одним видимым и одним скрытым элементом:

http://jsfiddle.net/tNjLb/

Answer 7

Кросс-браузер / версия решения, чтобы определить, является ли элемент видимым, состоит в том, чтобы добавить / удалить класс css к элементу на show / hide. Состояние элемента по умолчанию (видимое) может быть, например, таким:

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

Затем при скрытии удалите класс:

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

На шоу, добавьте это снова:

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

Затем, чтобы определить, является ли элемент видимым, используйте это:

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

Это также решает проблемы с производительностью, которые могут возникнуть при интенсивном использовании селектора ": visible", которые указаны в документации jQuery:

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

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

Answer 8

Обычно я живу в такой ситуации, когда родитель моего объекта скрыт. например, когда HTML-код выглядит так:

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

если вы спросите, виден ли ребенок, как:

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

он вернет false, потому что его родитель не виден, поэтому div также не будет виден.

Answer 9

Я добавил следующий стиль для родителя и .is (": visible") сработал.

дисплей: встроенный блок;

Answer 10

Мне нужно использовать видимость: скрыто вместо дисплей: нет , поскольку видимость принимает события, а дисплей - нет.

Так я и делаю .attr('visibility') === "visible"