javascript - 为什么我的 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

When you reload the page, you see it is not starting with closedivs, but it starts straight with adding classes without executing the if-else statement.

这是因为 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 语句的排序以及比较(保持“流畅”)。

快乐编码。