$(element).is(':visible')始终为false

Question

我有以下示例：http://jsfiddle.net/LAMdV/

HTML：

<div id="imageSlider">
    <span class="info" id="info1">
        hello world
    </span>
</div>

jQuery：

$('#imageSlider .info').click(function () {
    var i = $(this).attr('id');
    i = i.replace('info', '');

    if ($('#imageSliders .info#info' + i).is(':visible')) {    
        alert("hide");
    } else {
        alert("show");
    }
});

为什么is:visible的结果总是显示false？尽管它从一开始就是可见的！(在我的实际场景中，它之前是隐藏的，然后显示)

Answer 1

您的标记的id为"imageSlider“，而选择器使用的是"#imageSliders”(复数)。

Answer 2

这可能是因为id是imageSlider，而您的jQuery有#imageSliders (复数)。

Answer 3

你混淆了你的语法。

 if ($('#imageSliders .info#info' + i).is(':visible')) { ... }

类名在ids之后引用。但是，ids是最快的选择器，因此只需获取信息{number}作为主选择器

 if ($('#info' + i).is(':visible')) { ... }

但是，由于这是在函数调用中进行的，因此可以只使用this

 if ($(this).is(':visible')) { ... }

以进一步解释何时将class与id组合使用。以页面上的id为例，它可以用active类来装饰。

$("#uniqueid")

vs

$("#uniqueid.active")