Чи можна перемикати видимість елемента за допомогою функцій .hide()
, .show()
або .toggle()
?
Як би ви перевірили, чи є елемент visible
чи hidden
?
Чи можна перемикати видимість елемента за допомогою функцій .hide()
, .show()
або .toggle()
?
Як би ви перевірили, чи є елемент visible
чи hidden
?
Відповіді:
Оскільки питання стосується одного елемента, цей код може бути більш підходящим:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
Це те саме , що пропозиція twernt , але застосовується до одного елемента; і це відповідає алгоритму, рекомендованому у FAQ про jQuery .
Ми використовуємо jQuery's is () для перевірки обраного елемента з іншим елементом, селектором або будь-яким об’єктом jQuery. Цей метод рухається вздовж елементів DOM, щоб знайти збіг, який задовольняє переданому параметру. Він повернеться істинним, якщо є збіг, інакше повернеться хибним.
visible=false
та display:none
; враховуючи, що рішення Моте явно ілюструє кодери, що мають намір перевірити display:none
; (через згадку про приховування та покажіть, який контроль display:none
немає visible=true
)
:visible
також перевірять, чи видні батьківські елементи, як зазначив чіборг.
display
властивість. З огляду на , що початковий питання для show()
і hide()
, і вони встановили display
, що моя відповідь є правильним. До речі, це працює з IE7, ось тестовий фрагмент - jsfiddle.net/MWZss ;
Ви можете використовувати hidden
селектор:
// Matches all elements that are hidden
$('element:hidden')
І visible
селектор:
// Matches all elements that are visible
$('element:visible')
type="hidden"
- це лише один випадок, який може спрацьовувати: приховано. Елементи без висоти та ширини, елементи із display: none
та прихованими предками також класифікуються як: приховані.
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
Вищеописаний метод не враховує видимість батьків. Для розгляду також батьків слід скористатися .is(":hidden")
або.is(":visible")
.
Наприклад,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
Вищеописаний метод вважатиме
div2
видимим, а:visible
ні. Але вищесказане може бути корисним у багатьох випадках, особливо, коли вам потрібно знайти, чи є якісь помилки, які видно у прихованому батьківському середовищі, оскільки в таких умовах:visible
не вийде.
hide()
, show()
та toggle()
функцій, однак, як більшість з них вже говорили, ми повинні використовувати класи :visible
та :hidden
псевдокласи.
Жодна з цих відповідей не стосується того, що я розумію як питання, а саме це я шукав: "Як мені обробляти предмети, які є visibility: hidden
?" . Ні з цим, :visible
ні :hidden
з цим не впораються, оскільки вони обидва шукають показ відповідно до документації. Наскільки я міг визначити, немає селектора для обробки видимості CSS. Ось як я вирішив це (стандартні селектори jQuery, можливо, є більш ущільнений синтаксис):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
visibility
буквально, але питання було How you would test if an element has been hidden or shown using jQuery?
. Використання jQuery означає: display
властивість.
visibility: hidden
або opacity: 0
вважаються видимими, оскільки вони все ще займають місце в макеті. Дивіться відповідь Педро Рейнхо та документацію jQuery про :visible
селектор.
З Як визначити стан переключеного елемента?
Ви можете визначити, згортається чи ні елемент, використовуючи селектори :visible
та :hidden
.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Якщо ви просто дієте на елемент, заснований на його видимості, ви можете просто включити :visible
або :hidden
у вираз селектора. Наприклад:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
top:-1000px
Часто перевіряючи, чи щось видно чи ні, ви збираєтесь негайно йти вперед і робити з ним щось інше. Інтер'єр jQuery робить це легко.
Отже, якщо у вас є селектор і ви хочете виконати якусь дію над ним, лише якщо він видимий або прихований, ви можете використовувати filter(":visible")
абоfilter(":hidden")
слідувати, пов'язавши його з дією, яку ви хочете зробити.
Тож замість if
заяви, як це:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
Або ефективніше, але ще хитріше:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
Ви можете зробити це в один рядок:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
:visible
Селектор в відповідно до документацією JQuery :
- Вони мають
display
значення CSSnone
.- Вони є елементами форми з
type="hidden"
.- Їх ширина і висота явно встановлені на 0.
- Елемент предка прихований, тому елемент не відображається на сторінці.
Елементи з
visibility: hidden
абоopacity: 0
вважаються видимими, оскільки вони все ще займають місце в макеті.
Це корисно в деяких випадках і марно в інших, тому що якщо ви хочете перевірити, чи елемент видно ( display != none
), ігноруючи видимість батьків, ви виявите, що робите.css("display") == 'none'
робиться не тільки швидше, але і поверне перевірку видимості правильно.
Якщо ви хочете перевірити видимість замість дисплея, слід використовувати: .css("visibility") == "hidden"
.
Також врахуйте додаткові примітки jQuery :
Оскільки
:visible
розширення jQuery і не є частиною специфікації CSS, запити, що використовують,:visible
не можуть скористатися підвищенням продуктивності, наданим нативнимquerySelectorAll()
методом DOM . Щоб досягти найкращої продуктивності при використанні:visible
для вибору елементів, спочатку виберіть елементи за допомогою чистого селектора CSS, а потім використовуйте.filter(":visible")
.
Крім того, якщо ви стурбовані ефективністю, ви повинні перевірити. Тепер ви бачите мене ... показати / приховати продуктивність (2010-05-04). І використовувати інші методи, щоб показати та приховати елементи.
Як працює видимість елементів та jQuery ;
Елемент можна приховати за допомогою display:none
, visibility:hidden
або opacity:0
. Різниця між цими методами:
display:none
приховує елемент, і він не займає ніякого місця;visibility:hidden
приховує елемент, але він все одно займає місце в макеті;opacity:0
приховує елемент як "видимість: прихований", і він все ще займає місце в макеті; Єдина відмінність полягає в тому, що непрозорість дозволяє зробити елемент частково прозорим;
if ($('.target').is(':hidden')) {
$('.target').show();
} else {
$('.target').hide();
}
if ($('.target').is(':visible')) {
$('.target').hide();
} else {
$('.target').show();
}
if ($('.target-visibility').css('visibility') == 'hidden') {
$('.target-visibility').css({
visibility: "visible",
display: ""
});
} else {
$('.target-visibility').css({
visibility: "hidden",
display: ""
});
}
if ($('.target-visibility').css('opacity') == "0") {
$('.target-visibility').css({
opacity: "1",
display: ""
});
} else {
$('.target-visibility').css({
opacity: "0",
display: ""
});
}
Корисні методи перемикання jQuery:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
visibility:hidden
і opacity:0
полягає в тому, що елемент все одно буде реагувати на події (наприклад, кліки) за допомогою opacity:0
. Я дізнався цей трюк - виготовлення спеціальної кнопки для завантаження файлів.
Ви також можете це зробити за допомогою простого JavaScript:
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
Примітки:
Працює скрізь
Працює для вкладених елементів
Працює для CSS та inline стилів
Не вимагає рамки
visibility: hidden
, що видно .
Я б використовував клас CSS .hide { display: none!important; }
.
За приховування / показ я дзвоню .addClass("hide")/.removeClass("hide")
. Для перевірки видимості я використовую.hasClass("hide")
.
Це простий і зрозумілий спосіб перевірити / приховати / показати елементи, якщо ви не плануєте використовувати .toggle()
або .animate()
методи.
.hasClass('hide')
не перевіряє, чи прихований батьківський пращур (який би його також приховав). Можливо, ви можете змусити це правильно працювати, перевіривши, якщо .closest('.hide').length > 0
, але навіщо винаходити колесо?
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>
Джерело:
Ще одна відповідь, яку ви повинні врахувати, - це якщо ви ховаєте елемент, ви повинні використовувати jQuery , але замість того, щоб насправді його приховувати, ви видаляєте весь елемент, але ви копіюєте його вміст HTML і сам тег у змінну jQuery, а потім все, що вам потрібно зробити, це перевірити, чи є такий тег на екрані, використовуючи звичайний if (!$('#thetagname').length)
.
Під час тестування елемента на :hidden
селекторі в jQuery слід враховувати, що абсолютний позиціонований елемент може бути визнаний прихованим, хоча їх дочірні елементи видно .
В першу чергу це здається дещо контрінтуїтивним, хоча детальніше ознайомившись з документацією jQuery дає відповідну інформацію:
Елементи можна вважати прихованими з кількох причин: [...] Їх ширина і висота явно встановлені на 0. [...]
Таким чином, це насправді має сенс щодо коробкової моделі та обчисленого стилю для елемента. Навіть якщо ширина і висота не встановлені явно 0, вони можуть бути встановлені неявно .
Подивіться на наступний приклад:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>
Оновлення для jQuery 3.x:
З jQuery 3 описана поведінка зміниться! Елементи будуть вважатися видимими, якщо вони мають будь-які вікна компонування, включаючи нульову ширину та / або висоту.
JSFiddle з jQuery 3.0.0-alpha1:
Цей же код JavaScript матиме такий вихід:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Це може працювати:
expect($("#message_div").css("display")).toBe("none");
Приклад:
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
Щоб перевірити, чи його не видно, я використовую !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Або наступним є також сам, зберігаючи селектор jQuery у змінній, щоб мати кращу продуктивність, коли вам це потрібно кілька разів:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Використання класів, призначених для "приховування" елементів, є простим, а також одним з найбільш ефективних методів. Переміщення класу "приховано" з аDisplay
стилем "none" виконуватиметься швидше, ніж безпосередньо редагувати цей стиль. Дещо з цього я пояснив у запитанні про переповнення стека Поворот двох елементів, видимих / прихованих в одному ділі .
Ось справді освічуюче відео з Google Tech Talk від інженера Google Нікаса Закаса:
Активовано приклад використання видимої перевірки для adblocker:
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>
"ablockercheck" - це ідентифікатор, який блокує adblocker. Тож перевіривши це, чи воно видно, ви зможете виявити, чи ввімкнено adblocker.
Зрештою, жоден із прикладів мені не підходить, тому я написав свій.
Тести (без підтримки Internet Explorer filter:alpha
):
a) Перевірте, чи документ не приховано
b) Перевірте, чи елемент має нульову ширину / висоту / непрозорість або display:none
/ visibility:hidden
вбудовані стилі
в) Перевірте, чи центр (також тому, що він швидший, ніж тестування кожного пікселя / кута) елемента не прихований іншим елементом (і всіма предками, наприклад: overflow:hidden
/ прокрутка / один елемент над іншим) або екранами краю
г) Перевірте, чи елемент має нульову ширину / висоту / непрозорість чи display:none
/ видимість: прихований у обчислених стилях (серед усіх предків)
Випробуваний на
Android 4.4 (власний браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (режими документа Internet Explorer 5-11 + Internet Explorer 8 на віртуальна машина) та Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
relative = !!((!x && !y) || !document.elementFromPoint(x, y));
function inside(child, parent) {
while(child){
if (child === parent) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
if (
document.hidden ||
elem.offsetWidth==0 ||
elem.offsetHeight==0 ||
elem.style.visibility=='hidden' ||
elem.style.display=='none' ||
elem.style.opacity===0
) return false;
var rect = elem.getBoundingClientRect();
if (relative) {
if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
} else if (
!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight/2 < 0 ||
rect.left + elem.offsetWidth/2 < 0 ||
rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if(!el.parentNode) return false;
comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
el = el.parentNode;
}
}
return true;
}
})();
Як користуватись:
is_visible(elem) // boolean
Вам потрібно перевірити обидва ... Дисплей, а також видимість:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Якщо ми перевіримо $(this).is(":visible")
, jQuery перевіряє обидві речі автоматично.
Можливо, ви можете зробити щось подібне
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" id="tElement" style="display:block;">Firstname</input>
Просто перевірте видимість, перевіривши бульне значення, наприклад:
if (this.hidden === false) {
// Your code
}
Я використовував цей код для кожної функції. В іншому випадку ви можете використовувати is(':visible')
для перевірки видимості елемента.
Тому що Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(як описано для jQuery: видимий селектор ) - ми можемо перевірити, чи дійсно елемент видно таким чином:
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
Але що робити, якщо CSS елемента виглядає наступним чином?
.element{
position: absolute;left:-9999;
}
Таким чином, ця відповідь на питання переповнення стека Як перевірити, чи не є елемент поза екраном, також слід врахувати.
Функція може бути створена для того, щоб перевірити наявність атрибутів видимості / відображення, щоб визначити, відображається чи елемент в інтерфейсі чи ні.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
Також ось термінальний умовний вираз, щоб перевірити стан елемента і потім перемкнути його:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
$('elementToToggle').toggle('slow');
...:)
$(element).is(":visible")
працює для jQuery 1.4.4, але не для jQuery 1.3.2, під Internet & nbsp; Explorer & nbsp; 8 . Це можна перевірити, використовуючи корисний тест Цветомира Цонева . Просто не забудьте змінити версію jQuery, протестувати під кожною.