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

时间:2011-09-30 08:47:28

标签: javascript jquery if-statement

我得到一个问题,为什么我的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语句的情况下直接添加类。

我在这里做错了什么?

3 个答案:

答案 0 :(得分:4)

  

当你重新加载页面时,你会发现它不是以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语句的排序以及比较(保持“流动”)。

快乐的编码。

答案 1 :(得分:1)

你正在将你的功能包装在$()中,当你试图定义它们时它们会执行它们......

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

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

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

答案 2 :(得分:0)

我不是Javascript程序员,但我相信你在IF / ELSE语句中缺少一些大括号。根据{{​​3}}:

,应该是正确的语法
if (condition1){
    Handle condition1
    }
else if (condition2){
    Handle condition2
    }
else{
    Handle the rest
    }

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