jQuery的if语句用于检查元素是否可见

Question

我正在尝试编写一个脚本，根据其他元素的可见性来隐藏/显示div。当我单击其他元素时，应该执行此操作。以下是我到目前为止编写的代码：

$('#column-left form').hide();
    $('.show-search').click(function() {
        $('#column-left form').stop(true, true).slideToggle(300);
        if( $('#column-left form').css('display') == 'none' ) {
            $("#offers").show();
        } else {
            $('#offers').hide();
        }
    });

它隐藏了div，但当我隐藏表单时，它没有回来。非常感谢任何帮助 :)

编辑：

好的，我通过编写以下代码成功实现了所需的效果：

$('#column-left form').hide();
    $('.show-search').click(function() {
        if ($('#column-left form').is(":hidden")) {
            $('#column-left form').slideToggle(300);
            $('#offers').hide();
        } else {
            $('#column-left form').slideToggle(300);
            $("#offers").show();
        }
    });   

我不知道它是否写得正确，但它能工作；）感谢大家的帮助！

- Tomarz

Answer 1

你可以使用 .is(':visible') 来测试某个元素是否可见，使用 .is(':hidden') 来测试相反的情况：

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

参考资料：

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

- ThiefMaster

---

如果元素可见，则返回true，否则返回false。值得注意的是。;) - Purag

“to test if” 这个词组有点暗示它会返回一个布尔值 ;) - ThiefMaster

@Purmou：!$('#column-left form').is(':visible') 肯定会返回一个布尔值，但是这个语句被包含在 toggle 中，因此它应该能够实现所需的输出。 - Amit Rai Sharma

从jQuery文档中值得注意的是：具有visibility:hidden或opacity:0属性的元素被认为是可见的，因为它们仍然在布局中占用空间。 - Frank N

Answer 2

您可以在jQuery中使用.is(':visible')。但是，在Safari浏览器下运行代码时，.is(':visible')将无法工作。

因此，请使用以下代码：

if( $(".example").offset().top > 0 )

上述代码将在IE和Safari中都能正常工作。

- Baskar Madasamy

Answer 3

尝试

if ($('#column-left form:visible').length > 0) { ...

- kontur

---

即使是空的 jQuery 对象在布尔上下文中也会被评估为真(!![] === true)，所以这样是行不通的。但你可以通过添加.length来使其生效。 - ThiefMaster

@ThiefMaster：我已经编辑了kontur的答案，现在它是正确的！ - NickGreen

谢谢，取消了负面评价。不过我会省略掉>0，因为长度永远不会是负数。 - ThiefMaster

Answer 4

 $('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });

- pravin

Answer 5

如果可见。

$("#Element").is(':visible');

如果它被隐藏了。

$("#Element").is(':hidden');

- Nalan Madheswaran

Answer 6

在解决与使用.is(":visible")相关的性能问题后，我建议不要使用上述答案，而是使用jQuery的代码来确定单个元素是否可见：

$.expr.filters.visible($("#singleElementID")[0]);

所做的是检查一组元素是否在另一组元素中。因此，您将在页面上的整个可见元素集中寻找您的元素。拥有100个元素非常正常，可能需要几毫秒来搜索可见元素的数组。如果您正在构建Web应用程序，则可能有数百或数千个元素。我们的应用程序有时需要100毫秒才能执行$("#selector").is(":visible")，因为它正在检查一个元素是否在5000个其他元素的数组中。

- markdon