javascript - 尽管 CSS 位于就绪文档内，但在超时后仅显示无功能

Question

我在将 display 设置为 none 时遇到一些奇怪的行为

这是核心问题(我没有 jsfiddle，因为我无法在 jsfiddle 中重现问题)

$(document).ready(function(){
    for(var i = 0; i < 10; i++){
        jQuery('<li />')
           .attr("id", i)
           .attr("class", "toggle_test")
           .appendTo('ul');
        if (i >= 5){
            $("#".concat(i)).css("display", "none"); // doesn't work
            $("#".concat(i)).hide();                 // doesn't work
            $("#".concat(i)).css("color", "red");    // works
        }

    }
});

如您所见，将 display 设置为 none 或隐藏它在设置 css 颜色有效时不起作用，这不太有意义。

我进行了几个不同的测试。

1. 我发现，如果我在控制台中尝试 $("#1").css("display", "none"); ，它就会起作用
2. 如果我将 if 语句包装在另一个准备好的文档中，它仍然不起作用
3. 如果我添加超时。

代码:

if (i < 5){
    setTimeout(function(){
        // tested selecting class or id, below shows selecting class
        jQuery(".toggle_test").css("display", "none");  // works if timeout more than 1350
        jQuery(".toggle_test").css("color", "red");  // always works
    }, 2000);
}

只有超时大于1350时才有效，我不确定问题是什么，有人能给我一些建议吗？

Answer 1

主要问题是您向 jQuery 选择器传递一个数组。 Array.prototype.concat() 将一个值连接到一个数组中并返回新的修改后的数组。因此，返回类似 ['#', 1] 的值等等。

为了像您的情况一样查询元素，您只需连接迭代器值，就像通常使用字符串一样>.

 $("#" + i).css("display", "none"); 

注意: @DavidDomain 的评论中指出，您有一个拼写错误，实际上应该是 for(var i = 0; i < 10; i++) ... .