使用jQuery检查div是否隐藏

Question

这是我的div。

<div id="car2" style="display:none;"></div>

然后我有一个“显示”按钮，当你点击它时将显示该 div：

$("show").click(function() {
    $("$car2").show();
}); 

现在我想在提交表单之前检查 #car2 div 是否仍然隐藏：

if($('#car2').is(':hidden')) {
    alert('car 2 is hidden');
}

现在问题来了，即使div #car2已经显示出来了，我仍然收到警示消息，这意味着jQuery认为div #car2仍然是隐藏的。 我使用的jQuery版本是1.7。谢谢。
编辑:正如jasper所说，我的代码是正确的，并且可以通过这个演示运行。我怀疑我正在使用与我的表单一起使用的jQuery表单向导插件存在冲突。 有人有解决这个问题的想法吗？

- cyberfly

---

http://jsfiddle.net/YjP4K/2/ 当你简化代码后，它确实可以工作，所以也许你在其他地方犯了一个错误？ - Jasper

请参阅通过jQuery检查元素是否隐藏。 - Adam Katz

Answer 1

您可以检查CSS的display属性：

if ($('#car').css('display') == 'none') {
    alert('Car 2 is hidden');
}

这里有一个演示：http://jsfiddle.net/YjP4K/

- Jasper

---

虽然其他答案是正确的，但不知何故我只能在我的表单中使用这种方法，所以我会选择这个作为答案。谢谢。 - cyberfly

$('#car').is(:hidden) 应该可以工作。这也比当前的解决方案更加简洁。更多信息请查看 https://api.jquery.com/hidden-selector/ - akshay

@akshay 是的，这更符合语义。我认为有一些边缘情况需要自己进行检查，因为元素周围的条件会影响:hidden和:visible选择器。 - Jasper

@akshay，你忘记在:hidden上加引号了。应该是$('#car').is(':hidden')。 - Ankush Raghuvanshi

Answer 2

请尝试：

if(!$('#car2').is(':visible'))
{  
    alert('car 2 is hidden');       
}

- Omtara

Answer 3

尝试

if($('#car2').is(':hidden'))
{  
    alert('car 2 is hidden');       
}

- Sadikhasan

Answer 4

尝试检查 :visible 属性即可。

if($('#car2').not(':visible'))
{
    alert('car 2 is hidden');       
}

- Phil.Wheeler

Answer 5

你有没有注意到自己的错别字，$car2应该是#car2？

无论如何，:hidden似乎按预期工作，请在这里尝试。

- smendola

Answer 6

你可以使用以下代码：

if (!$("#car-2").is(':visible'))
{
      alert('car 2 is hidden');
}

- SharK