1

我正在使用轻量级 zepto.js 框架，现在我需要测试页面上的元素是否可见……这是我的情况：

一个按钮触发该功能show_guides()。

function show_guides() {
    $('#guides').toggle();

    if ( $('#guides').is(':visible') ) { // does not work
        //$.cookie('guides_visible', 'true');
        console.log("visible");
    } else {
        console.log("invisible");
        //$.cookie('guides_visible', null);
    }
}

如果它们$('#guides')是可见的，我想保存一个 cookie，如果它们不可见，我想摆脱它。

但是 zepto.js 不支持像这样的选择器，:visible所以我必须找到一种不同的方式。任何想法如何做到这一点？现在我收到以下错误：

未捕获的错误：SYNTAX_ERR：DOM 异常 12

在我读过的 zepto 文档中……</p>

对于 jQuery 的非标准伪选择器（例如 :visible）的基本支持，包括可选的“选择器”模块。

但我不知道如何包含这个。

任何人都可以在这里帮助我吗？先感谢您。

4

4 回答 4

3

您可以检查显示 CSS 属性：

 function show_guides() {

        $('#guides').toggle();

        if ( $('#guides').css('display') == 'block' ) { 
            console.log("visible");
        } else {
            console.log("invisible");
        }
    }
于 2012-07-09T08:32:02.553 回答
1

尝试

     style.display="block";

和

     style.display="hidden";
于 2012-07-09T08:34:45.403 回答
1

您可以检查可见性：可见/隐藏，或显示：块/无

$('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'
于 2012-07-09T08:49:50.363 回答
1

如果您只想检查可见性，您可以使用它

  function visible(elem){
    elem = $(elem)
    return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
  }

直接取自 zepto 选择器插件。否则，您可以按照 Felix Kling 的建议仅包含https://github.com/madrobby/zepto/blob/master/src/selector.js中的选择器模块

于 2013-05-13T19:55:05.897 回答