为什么我的 if-else 语句没有正确执行？答案

【问题标题】：Why is my if-else statement not executing correctly?为什么我的 if-else 语句没有正确执行？
【发布时间】：2011-10-01 13:58:28
【问题描述】：

我有一个问题，为什么我的 if-else 语句不起作用。

我有一个带有文本输入的表单，当用户输入他们想要的大小时，它应该实时编辑图片。我正在使用 jQuery 中的 addclass 和 removeclass 方法。这是我的脚本：

function slide() {
    var n = Number(document.getElementById('Getal1').value)

    if (n >= 101 && n < 201)
        $(openDiv1());

    else if(n > 200)
        $(openDiv2());

    else if(n >= 0 && n < 101)
        $(closeDiv());

    else {
        alert("You did not enter a number!")
    }
}

$(function openDiv1() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_2block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_1block Addclass_ombouw_wrap_3block" );
    }, 0 );
}

$(function openDiv2() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_3block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_1block Addclass_ombouw_wrap_2block" );
    }, 0 );
}

$(function closeDiv() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_1block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_2block Addclass_ombouw_wrap_3block" );
    }, 0 );
}

window.onload = closeDiv;

这是我的 HTML 代码：

Lengte: <INPUT TYPE="text" NAME="numeric" onKeyup="slide()" id="Getal1" onKeyPress="return checkIt(evt)">
x Hoogte: <input type="text" ID="Getal2" onKeyPress="return checkIt(evt)">
x Diepte: <input type="text" ID="Getal3" onKeyPress="return checkIt(evt)">
</form>

当您重新加载页面时，您会看到它不是以 closedivs 开头，而是直接从添加类开始而不执行 if-else 语句。

我在这里做错了什么？

【问题讨论】：

您的 if else if 语句没有使用括号。
只是对您的代码的建议。在您的代码中始终使用英语。像 ID="Getal2"。您应该使用英语，因为它可能会被非荷兰人使用/编辑（例如在 stackoverflow 上的这种情况下）。它对代码更有意义。只是一个荷兰人给另一个荷兰人的建议:)
像 if (n>=101 && n
@jayp 括号不需要 1 行 if-else 语句（1 行执行）
它们不是必需的，但他编写代码的方式不一致。一些语句后有括号，其他语句后没有括号。那是我的观点。因此是评论，而不是答案。

标签： javascript jquery if-statement

【解决方案1】：

当您重新加载页面时，您会看到它不是以 closedivs 开头，而是直接从添加类开始而不执行 if-else 语句。

这是因为 jQuery 将$(function) 视为$.ready(function) 的一种方便形式：传递的函数对象在页面加载时执行。

也就是说，$(function openDiv1() {...}) 定义了一个函数对象，然后将其传递给 jQuery 以在页面加载时自动执行。相反，从$(...) 中删除函数。例如，function openDiv1() {...} 就足够了。（这也将修复无法调用openDiv1 的错误——因为它是一个函数表达式，它不会被分配给范围内的变量/属性。）

下面描述了slide 函数的问题。

JavaScript 做了一些强制；下面显示了为什么永远不会到达 else 分支：

Number("")         // same as Number(0)
Number("") >= 0    // true

但实际上，请不要使用Number（它是number 的包装对象），请考虑使用parseInt(str, 10) 作为替代品。另外，parseInt("", 10) 的计算结果为 NaN（不是 0），由于 NaN >= 0 为假，这将解决最初的问题。

function slide(){
    var n = parseInt(document.getElementById('Getal1').value, 10)
    if (n >= 0 && n <= 100) {
        $(closeDiv())
    } else if (n > 100 && n <= 200) {
        $(openDiv1())
    } else if (n > 200) {
        $(openDiv2())
    } else {
        alert("You did not enter a number!")
    }
}

还要注意我添加的一致性更改。括号不是必需的，但我发现它有助于以一致的格式/缩进风格进行写作。其他需要注意的事情是 if/else 语句的排序以及比较（保持“流动”）。

编码愉快。

【讨论】：

好吧，如果现在将我的代码更改为您的代码，但它仍然不会停留在 closediv 并将所有类填充到 div..
@user968588 还有一个问题，我更新了我的答案。

【解决方案2】：

您将函数包装在 $() 中，当您尝试定义它们时将执行它们...

// alerts 1
$(function myFunc(){ alert(1) })

你需要在你的 if/else 语句之前定义你的函数，就像这样......

// does not execute until called
function myFunc(){ ... }

【讨论】：

您在$() 中进行变形，但您不应该这样做。问题是：$(function openDiv1() { ... }) 没有定义函数，而是执行函数。你应该按照我的说明定义你的函数。

【解决方案3】：

我不是 Javascript 程序员，但我相信您的 IF/ELSE 语句中缺少一些花括号。正确的语法应该是，根据W3:

if (condition1){
    Handle condition1
    }
else if (condition2){
    Handle condition2
    }
else{
    Handle the rest
    }

当然，如果不是这种情况，并且不需要大括号，那么我希望其他人可以帮助你:)。

【讨论】：