Question

我正在将一段代码从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模拟is(':visible')？
如何扩展ChocolateChip UI的is()以处理:visible？

Answer 1

作为第一个问题的答案：

在jQuery 1.3.2中，如果浏览器报告的offsetWidth或offsetHeight大于0，则元素可见。（source）

所以

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

应与

相同

(element.offsetWidth > 0 || element.offsetHeight > 0)

Answer 2

作为对第二个问题的回答：

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兼容＆gt; 2.0.3（见the project's Readme）。

Answer 3

由杰森法瑞尔创建的

This tool可能很有用。

我创建了一个查看对象并检查每个对象的工具   父母看看用户是否仍然可以看到它。

它甚至可以在Internet Explorer中运行，不需要jQuery。

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

3 个答案: