else if 语句在 jquery 中不起作用答案

【问题标题】：else if statement not working in jqueryelse if 语句在 jquery 中不起作用
【发布时间】：2014-04-02 22:57:24
【问题描述】：

为了简单起见，我删除了变量名并只输入了值。

无法弄清楚为什么这不能正常工作，else 语句工作正常，if 语句工作正常但 else if 部分不能。

 if (scrollTop > 200) {

    $('.vote-next-hover').css({

        position: 'fixed',
        top: '50px',
        width: statuscontain,

    });

 } 

 else if (scrollTop > 5500) {

     $('.vote-next-hover').css({

        position: 'absolute',
        top: '',
        width: '',

     });

 } 

else {

  $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });

}

滚动 200px，触发 if 语句，回滚到小于 200 并触发 else 语句，但它绝不会触发 else if 语句。

我认为它会是 - 条件 1 满足，火灾 - 条件 2 满足，火灾 - 条件 3 满足，火灾？

【问题讨论】：

你不需要top: '0px' 什么的吗？
还有，有没有尝试一步步调试？
不，那些是为了清除声明。
else 表示前面的条件不满足。如果scrollTop > 5500 也有可能是` > 200`

标签： javascript jquery if-statement

【解决方案1】：

您应该交换 if 和 else if 子句。看，如果scrollTop 的值大于5500，它肯定大于200 - 因此它会很好地通过第一次检查，而使第二次检查毫无意义。

所以if (scrollTop > 5500) 应该在您的代码中首先出现，然后是else if (scrollTop > 200) 检查。

我想知道您是否知道可以使用...switch 编写相同的分支逻辑？

var hoverStyle = { position: 'relative', top: '', width: '' };
switch (true) {
  case scrollTop > 5500:
    hoverStyle.position = 'absolute';
    break;
  case scrollTop > 200:
    hoverStyle = { position: 'fixed', top: '50px', width: statuscontain };
}
$('.vote-next-hover').css(hoverStyle);

有些人甚至认为它比if-elseif-else 更具可读性。但当然，同样的限制也适用于那里 - 不太常见的情况应该先处理（或者应该稍后重新检查）。

作为旁注，我真的认为在分支中重复 $('.vote-next-hover').css() 调用是没有意义的。只分离代码的不同部分就足够了 - 在这种情况下，设置 .css() 参数。

【讨论】：

或者你可以在第一步测试(scrollTop > 200 && scrollTop <= 5500)
^ 是的，这个，呃，我不敢相信在问这个问题之前我没有想到这个，谢谢。希望我也将正确答案授予布莱尔。

【解决方案2】：

if/else if/else 块应该只运行三个选项之一。例如：

var test = 4;
if (test === 4) { //true
    test = 3;
} else if(test === 3) {//does not do, already did one
    test = 0
} else {
    test = “something”
}

所以你需要三个 if 块，而不是 if/else if/else。

【讨论】：

【解决方案3】：

假设你已经滚动到6000，6000大于200，那么第一个条件就满足了。然后因为你有一个else if 它不会测试第二个条件。

你有两个选择：

将 scrollTop > 5500 检查添加到 > 200 检查内部，或替换 if, else if 的顺序以先放置 > 5500 检查，然后放置 > 200 检查。

if (scrollTop > 200) {
    if (scrollTop > 5500) {
        $('.vote - next - hover ').css({
            position: 'absolute ',
            top: '',
            width: '',
        });
    } else {
        $('.vote - next - hover ').css({
            position: 'fixed ',
            top: '50px ',
            width: statuscontain,
        });
    }
} else {
    $('.vote - next - hover ').css({
        position: 'relative ',
        top: '',
        width: '',
    });
}

【讨论】：

【解决方案4】：

"滚动 200px，触发 if 语句，滚动回小于 200 并且它会触发 else 语句，但绝不会触发 else if 声明。”

这是一个逻辑错误。由于任何高于 5500 的数字也高于 200，当您使用 else if 时，您是在说第一个标准不正确。

您应该将代码更改为：

if (scrollTop > 5500) {
    $('.vote-next-hover').css({
        position: 'absolute',
        top: '',
        width: '',
    });    
}
else if (scrollTop > 200) {                      
    $('.vote-next-hover').css({
        position: 'fixed',
        top: '50px',
        width: statuscontain,
    });

}
else {
    $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });    
}

【讨论】：

【解决方案5】：

这个逻辑错误

$('#crud_interval').bind("change", function() {

if( $('#crud_interval').val() ==='Daily' ) { //not running
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').hide();
} else if( $('#crud_interval').val() ==='Weekly' ) { //not running
    $('#crud_weekly_day').show();
    $('#crud_monthly_date').hide();
} else {
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').show();
}

});

【讨论】：