模拟jQuery:使用普通Javascript的可见选择器

前端之家收集整理的这篇文章主要介绍了模拟jQuery:使用普通Javascript的可见选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在将一段代码从jQuery转换为ChocolateChip UI,这段代码让我感到困惑,因为ChocolateChip UI不支持’: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. 

两个问题:

>我如何使用纯JavaScript模拟(‘:visible’)?
>我如何扩展ChocolateChip UI的is()来处理:可见?

最佳答案
作为第二个问题的答案:

ChocolateChip UI似乎没有提供扩展选择器的方法. code for the .is() function表明,当选择器是一个字符串时,该字符串直接输入.querySelectorAll().

但是,您也可以将函数作为参数传递,因此使用谓词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).

猜你在找的jQuery相关文章