javascript - 模拟jQuery :visible selector with plain Javascript

我正在将一段代码从jQuery转换为ChocolateChip UI，而这段代码让我很沮丧，因为ChocolateChip UI的is()实现不支持':visible'

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.

两个问题:

如何使用纯JavaScript模拟o​​jit_code？

如何扩展ChocolateChip UI的is(':visible')以处理is()？

最佳答案

作为第二个问题的答案:

ChocolateChip UI似乎没有提供扩展选择器的方法。所述code for the .is() function示出，当选择器是一个字符串，这个字符串被直接供给到.querySelectorAll()。

但是，您也可以传递function作为参数，因此使用指出的谓词Pieter de Bie，您可以编写:

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

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

另一个解决方案是使用jQuery:作者规定他们的库应与jQuery> 2.0.3兼容(请参阅the project's Readme)。