jQuery 和 switch 语句

Question

我使用 jQuery 的 switch 语句（见下文）有问题：

$(window).scroll(function() {
var sc = $(document).scrollTop();
switch (sc) {
case sc > 200:
    $('.row1').fadeIn();
    break;  
case sc > 600: 
    $('.row2').fadeIn();
    break;     
case sc > 1000:  
    $(".row3").fadeIn(); 
}
});

当我向下滚动 200px 时，应该会出现带有 class="row1" 的 div 标签。但它没有出现。

有人知道我的代码有什么问题吗？

谢谢

Answer 1

您不能在 switch 语句中使用>。

改为使用if ... else if 链：

var sc = $(document).scrollTop();
if (sc > 1000) {  
    $(".row3").fadeIn(); 
} else if (sc > 600) {
    $('.row2').fadeIn();
} else if (sc > 200) {
    $('.row1').fadeIn();
}

注意：注意条件是相反的，所以你会得到正确的结果。如果您将它们保持在原始顺序，那么if (sc > 1000) 在到达时将永远不会为真。 sc 的这种值已经用早期的 if (sc > 200) 处理。

另类

如果您喜欢紧凑的代码，您也可以使用三元运算符编写此代码，并且只处理不同的部分，即row 后面的数字：

$(".row" + (sc > 1000 ? 3 : sc > 600 ? 2 : sc > 200 ? 1 : 0)).fadeIn(); 

这可能会产生选择器.row0，但因为它确实（应该）不存在，所以在这种情况下什么都不会发生。