如果条件运算符不起作用，则许多其他操作符

Question

我希望它在数字为 0 时触发。 当数字为 1 或 2 时，当数字为

3 或 4 时，当数字为 5 或 6 时。 当触发时，它会改变一些元素的高度。 现在它总是返回 70px。

    if(y == 0){
        $('slpage').style.height = '0px';
    }else if(y >= 1){
        $('slpage').style.height = '70px';
    }else if(y <=4){
        $('slpage').style.height = '140px';
    }else if(y >= 5){
        $('slpage').style.height = '210px';
    }

谢谢

Answer 1

您应该考虑对语句重新排序。这样它首先检查最高，然后检查最低。

if(y == 0){
        $('slpage').style.height = '0px';
    }else if(y >= 5){
        $('slpage').style.height = '210px';
    }else if(y >=4){
        $('slpage').style.height = '140px';
    }else if(y >= 1){
        $('slpage').style.height = '120px';
    }

否则，您最终总是在达到最高点之前触发最低点。

我猜你在第三个条件下为支票做了一个类型。纠正。

如果与整数相关，则切换。 它的意思是它应该是 0,1,2,3,4,5,6。 但我的情况是如果 0。 它触发。 如果 1-2。 它触发。 如果 3-4。 它触发。 如果 5-6。 它触发。

不要仅仅因为您必须一次涵盖 2 种情况而限制自己使用开关。 Switch也有这种设施。

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '120px';
        break;
    case 3:
    case 4:
         $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
         $('slpage').style.height = '240px';
         break;
}

假设你使用 Jquery，你的 Jquery 选择器是错误的。您缺少#或.如果您不是，请忽略。

Answer 2

您也可以使用开关大小写

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '70px';
        break;
    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
        $('slpage').style.height = '210px';
        break;
}

function sw(y) {
    switch (y) {
        case 0:
            console.log('0px');
            break;
        case 1:
        case 2:
            console.log('70px');
            break;
        case 3:
        case 4:
            console.log('140px');
            break;
        case 5:
        case 6:
            console.log('210px');
            break;
        default:
        console.log('no value mathed value');
    }
}
sw(0);
sw(1);
sw(2);
sw(3);
sw(4);
sw(5);
sw(6);
sw()

Answer 3

当你有 y = {1,2,3,4,5,6} 时，它满足>=1 的条件，因此它在这一点上打破它。而是将逻辑从最高更改为最低

   if(y >=5){
        $('slpage').style.height = '210px';
    }else if(y >= 3){
        $('slpage').style.height = '140px';
    }else if(y >=1){
        $('slpage').style.height = '70';
    }else {
        $('slpage').style.height = '0px';
    }

Answer 4

最好使用switch：

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '70px';
        break;
    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
        $('slpage').style.height = '210px';
        break;
    default:
        $('slpage').style.height = '0px';
 }

Answer 5

也许是开关语句？

switch (y) {
    case 0:
         $('slpage').style.height = '0px';
        break;
    case 1:        
    case 2:
        $('slpage').style.height = '70px';
        break;
    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    default:
        $('slpage').style.height = '210px';
}

有关更多信息，您可以查看：https://www.w3schools.com/js/js_switch.asp

Answer 6

DRY (不要重复自己(

var h = 0;
     if (y >= 5) h = 210;
else if (y >= 3) h = 140;
else if (y >= 1) h = 70;
$('slpage').style.height = h+'px';

若

function $(id) { return document.getElementById(id); } 

如果你使用的是jQuery，你需要

$('.slpage').css({"height": h+'px'});

或

$('#slpage').css({"height": h+'px'});

取决于选择器