Как проверить, скрыт ли элемент в jQuery? - PullRequest
7252 голосов
/ 07 октября 2008

Можно переключать видимость элемента, используя функции .hide(), .show() или .toggle().

Как бы вы проверили, является ли элемент видимым или скрытым?

Ответы [ 53 ]

10 голосов
/ 04 апреля 2016

Вы можете просто добавить класс, когда он виден. Добавьте класс, show. Тогда проверьте, есть ли у него класс:

$('#elementId').hasClass('show');

Возвращает true, если у вас есть класс show.

Добавьте CSS следующим образом:

.show{ display: block; }
8 голосов
/ 20 марта 2017

Слишком много способов проверить наличие скрытых элементов. Это лучший выбор (я только что порекомендовал вам):

Используя jQuery, создайте элемент "display: none" в CSS для скрытого.

Дело в том:

$('element:visible')

И пример использования:

$('element:visible').show();
6 голосов
/ 08 августа 2017

Просто проверьте атрибут display (или visibility в зависимости от того, какой тип невидимости вы предпочитаете). Пример:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
4 голосов
/ 10 октября 2018

1 • Решение jQuery

Методы определения, видим ли элемент в JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Цикл на всех видимых div дочерних элементах id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Заглянул в источник jQuery

Вот как jQuery реализует эту функцию:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • Как проверить, находится ли элемент вне экрана - CSS

Используя Element.getBoundingClientRect (), вы можете легко определить, находится ли ваш элемент в границах вашего окна просмотра (т. Е. На экране или вне экрана):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Затем вы можете использовать это несколькими способами:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Если вы используете Angular, отметьте: Не используйте скрытый атрибут с Angular

4 голосов
/ 01 декабря 2016

Вы можете использовать

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Документация по API: https://api.jquery.com/visible-selector/

3 голосов
/ 23 марта 2016
if($("h1").is(":hidden")){
    // your code..
}
3 голосов
/ 15 августа 2018

Если вы хотите проверить, видим ли элемент на странице, в зависимости от видимости его родителя, вы можете проверить, равны ли width и height элемента 0.

JQuery

$element.width() === 0 && $element.height() === 0

ваниль

element.clientWidth === 0 && element.clientHeight === 0

Или

element.offsetWidth === 0 && element.offsetHeight === 0

2 голосов
/ 25 марта 2017

Если честно, вопрос предшествует этому ответу.

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

Правильный способ определить, является ли что-то видимым, - обратиться к модели представления;

Если вы не знаете, что это значит, то вы отправляетесь в путешествие открытий, которое значительно облегчит вашу работу.

Вот обзор архитектуры модель-вид-модель-модель (MVVM).

KnockoutJS - это библиотека привязок, которая позволит вам попробовать этот материал, не изучая всю инфраструктуру.

А вот некоторые JS и DIV, которые могут или не могут быть видны.

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      //get current visibility state for the div
      var x = IsDivVisible();
      //set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

Обратите внимание, что функция переключения не обращается к DOM для определения видимости div, она обращается к модели представления.

0 голосов
/ 12 сентября 2018

Решение jQuery, довольно старый вопрос, но все же я упал, я могу дать немного лучший ответ для тех, кто хочет изменить текст кнопки.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>
0 голосов
/ 30 июля 2018

Вместо написания event для каждого element, сделайте следующее:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Также вы можете использовать его на входах:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...