为什么我的if-else语句无法正确执行？

Question

我有一个问题，为什么我的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语句。

我在这里做错了什么？

Answer 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为false，因此可以解决最初的问题。

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语句的顺序以及比较（使其保持“流动”状态）。

快乐的编码。

Answer 2

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

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

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

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

Answer 3

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

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

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