模拟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.

两个问题：

  1. 我如何使用纯JavaScript模拟is(':visible') ？
  2. 我如何扩展ChocolateChip UI的is()来处理:visible ？

作为第二个问题的答案：

ChocolateChip UI似乎没有提供扩展选择器的方法。 .is()函数的代码显示，当选择器是一个字符串时，该字符串直接输入.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兼容（参见项目的自述文件 ）。

作为第一个问题的答案：

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

所以 

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

应该是一样的 

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

这个由Jason Farrell创建的工具可能很有用。

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

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

Interesting Posts