否則if語句在jquery中不起作用

Question

我刪除了變量名，只是為了簡單起見將它們放在其中。

無法弄清楚為什么它不能正常工作， else語句可以正常工作， if語句可以正常工作，而else if部分不能正常工作。

 if (scrollTop > 200) {

    $('.vote-next-hover').css({

        position: 'fixed',
        top: '50px',
        width: statuscontain,

    });

 } 

 else if (scrollTop > 5500) {

     $('.vote-next-hover').css({

        position: 'absolute',
        top: '',
        width: '',

     });

 } 

else {

  $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });

}   

滾動200px，觸發if語句，向后滾動到小於200並觸發else語句，但是在任何時候都不會觸發else if語句。

我以為是-條件1遇難，火災-條件2遇難，火災-條件3遇難，火災？

Answer 1

您應該交換if和else if子句。 請參見，如果scrollTop值大於5500 ，則它肯定大於200因此它將很好地通過第一個檢查，從而使第二個檢查毫無意義。

因此， if (scrollTop > 5500)應該在代碼中排在首位，然后再進行else if (scrollTop > 200)檢查。

---

我不知道您是否知道可以使用... switch編寫相同的分支邏輯？

var hoverStyle = { position: 'relative', top: '', width: '' };
switch (true) {
  case scrollTop > 5500:
    hoverStyle.position = 'absolute';
    break;
  case scrollTop > 200:
    hoverStyle = { position: 'fixed', top: '50px', width: statuscontain };
}
$('.vote-next-hover').css(hoverStyle);

有些人甚至認為它比if-elseif-else更具可讀性。 但當然，這里也有同樣的限制-較不常見的情況應首先處理（或以后再檢查）。

作為一個旁注，我真的認為在分支內復制$('.vote-next-hover').css()調用沒有意義。 僅分隔代碼的不同部分就足夠了-在這種情況下，設置.css()參數。

Answer 2

if / else if / else塊應僅運行以下三個選項之一。 例如：

var test = 4;
if (test === 4) { //true
    test = 3;
} else if(test === 3) {//does not do, already did one
    test = 0
} else {
    test = “something”
}

因此，您需要三個if塊，而不是if / else if / else。

Answer 3

假設您滾動到6000，則6000大於200，因此滿足第一個條件。 然后，因為else if不測試第二個條件，則有另一個。

您有兩種選擇：

將scrollTop> 5500 check添加到> 200 check內，或者替換if, else if的順序if, else if先放置> 5500 check，然后再放置> 200 check。

if (scrollTop > 200) {
    if (scrollTop > 5500) {
        $('.vote - next - hover ').css({
            position: 'absolute ',
            top: '',
            width: '',
        });
    } else {
        $('.vote - next - hover ').css({
            position: 'fixed ',
            top: '50px ',
            width: statuscontain,
        });
    }
} else {
    $('.vote - next - hover ').css({
        position: 'relative ',
        top: '',
        width: '',
    });
}

Answer 4

“滾動200px，觸發if語句，向后滾動到小於200並觸發else語句，但是在任何時候都不會觸發else if語句。”

這是一個邏輯錯誤。 因為任何高於5500的數字也高於200，並且當您使用else時，如果您說第一個條件不正確。

您應該將代碼更改為：

if (scrollTop > 5500) {
    $('.vote-next-hover').css({
        position: 'absolute',
        top: '',
        width: '',
    });    
}
else if (scrollTop > 200) {                      
    $('.vote-next-hover').css({
        position: 'fixed',
        top: '50px',
        width: statuscontain,
    });

}
else {
    $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });    
}

Answer 5

此邏輯錯誤

$('#crud_interval').bind("change", function() {

if( $('#crud_interval').val() ==='Daily' ) { //not running
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').hide();
} else if( $('#crud_interval').val() ==='Weekly' ) { //not running
    $('#crud_weekly_day').show();
    $('#crud_monthly_date').hide();
} else {
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').show();
} 

}）;