Эмуляция jQuery: видимый селектор с простым Javascript

Я преобразую часть кода из jQuery в пользовательский интерфейс ChocolateChip, и этот кусок кода вводит меня в заблуждение, поскольку пользовательский интерфейс ChocolateChip не поддерживает ":visible" для его реализации is()

if (interactive && block.is(':visible')) {
            block.fadeOut(250, function() {
                block.html(newContent);
                block.fadeIn(750);
            });
            showHighlight($("#character_text"));
}

Я получаю ошибку:

Uncaught SyntaxError: Failed to execute query: ':visible' is not a valid selector.

Два вопроса:

  1. Как я могу подражать is(':visible') используя простой JavaScript?
  2. Как я могу расширить пользовательский интерфейс ChocolateChip is() обрабатывать :visible?
Источник

3 ответа

Решение

Как ответ на ваш второй вопрос:

Интерфейс ChocolateChip, похоже, не позволяет расширять селекторы. Код для .is() Функция показывает, что когда селектор является строкой, эта строка напрямую передается .querySelectorAll(),

Тем не менее, вы также можете передать function в качестве аргумента, поэтому, используя предикат Питера де Би, вы можете написать:

$.fn.extend({
   isVisible: function(){
       return this.is( function(elem){
           return elem.offsetWidth > 0 || elem.offsetHeight > 0;
       });
   }
});

if ( $('.mySelector').isVisible() ){
    ....
}

Другое решение заключается в использовании jQuery: авторы утверждают, что их библиотека должна быть совместима с jQuery > 2.0.3 (см . Readme проекта).

Источник

Как ответ на ваш первый вопрос:

В jQuery 1.3.2 элемент виден, если его сообщенные браузером offsetWidth или offsetHeight больше 0. ( источник)

Так

$(element).is(":visible")

Должен быть таким же, как

(element.offsetWidth > 0 || element.offsetHeight > 0)
Источник

Этот инструмент, созданный Джейсоном Фарреллом, может быть полезен.

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

Он даже работает в Internet Explorer и не требует jQuery.

Источник
Другие вопросы по тегам