jQuery if/else hasClass（else not working）

我試圖學習如果其他語句與jQuery和hasClass。我做了一個簡單的測試，不會工作，我不知道爲什麼。jQuery if/else hasClass（else not working）

if ($('.one').hasClass('left')) { 

    $('.button').click(function() { 
    $('.one').addClass('right'); 
    $('.one').removeClass('left'); 
    }) 

} else { 

    $('.button').click(function() { 
    $('.one').addClass('left'); 
    $('.one').removeClass('right'); 
    }) 

}

我很困惑，因爲當我去在Chrome開發者工具，按鈕的第一次點擊正常工作，而且這些類都是正確切換和左被刪除。我不確定爲什麼else語句不起作用。一切對我來說都是正確的。

Link to fiddle

來源

2017-08-16 Dale Spiteri

執行'if'邏輯*單*事件的內部處理程序和噗噗，那就是你的問題！ –

註冊新的點擊處理程序註銷以前的點擊嗎？如果不是這樣，那麼這兩個處理程序可能會立即開始互相取消。 – Carcigenicate

你做你檢查前點擊，然後處理程序總是做同樣的事情。

你想要做你的支票在處理程序：

$('.button').click(function() { 
    if ($('.one').hasClass('left')) { 
     $('.one').addClass('right'); 
     $('.one').removeClass('left'); 
    } else { 
     $('.one').addClass('left'); 
     $('.one').removeClass('right'); 
    } 
});

或者，當然了，使用toggleClass，但我就認爲你正在學習if/else ...

注意：我不會重複這樣的查詢，我會記住該設置並重新使用它（連同鏈接）：

$('.button').click(function() { 
    var one = $('.one'); 
    if (one.hasClass('left')) { 
     one.addClass('right').removeClass('left'); 
    } else { 
     one.addClass('left').removeClass('right'); 
    } 
});

來源

2017-08-16 16:38:14

你的邏輯在裏面：你應該綁定click事件一次，然後在回調函數內評估if/else條件。

您的當前代碼將僅綁定兩個單擊事件之一，因爲hasClass()語句在運行時進行評估。

$(function() { 
 
$('.button').click(function() { 
 
    if ($('.one').hasClass('left')) { 
 
    $('.one').addClass('right').removeClass('left'); 
 
    } else { 
 
    $('.one').addClass('left').removeClass('right'); 
 
    } 
 
}); 
 
});

.one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    transition: all 500ms; 
 
} 
 

 
.left { 
 
    left: 10px; 
 
} 
 

 
.right { 
 
    left: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one left"></div> 
 
<button class="button">swap</button>

來源

2017-08-16 16:38:15 Terry

-1

你需要把你的「如果」語句中的「點擊」處理程序中：

$('.button').click(function() { 
    if ($('.one').hasClass('left')) { 
    $('.one').addClass('right'); 
    $('.one').removeClass('left'); 
    } else { 
    $('.one').addClass('left'); 
    $('.one').removeClass('right'); 
    } 
})

來源

2017-08-16 16:48:09 Yeedub

jQuery if/else hasClass（else not working）

回答

相關問題