Скрыть div, когда выполняется условие jquery, не работает

Question

У меня есть следующий div, который должен быть скрыт для начала.

<div class="alert alert-danger alert-dismissible" style="display: none;" id="alertDiv"> <strong>Note!</strong><p>At the moment we cannot accept any players born 05 or earlier beacuse we currently are too many.</p></div>

Когда пользователь вводит числовое значение в текстовое поле "members-form-personumber", я хочу проверить значениес помощью jquery и покажите div выше, если критерии в функции выполнены, но это не работает. Div никогда не отображается, хотя я вхожу в 2007, например. Что я делаю не так?

$('#membership-form-personumber').on('keyup change', function(c) {

    //initially hide all
    if(this.value.length < 4){
        $('#alertDiv').hide();
    }
    else{

        switch(parseInt(this.value)){

            case 2019: case 2018: case 2017: case 2016: case 2015: $('#alertDiv').show(); break;
            case 2014: case 2013: case 2012: case 2011: case 2010: $('#alertDiv').show(); break;
            case 2009: case 2008: case 2007: $('#alertDiv').show(); break;
        }

    }
});

Answer 1

Обновление: надеюсь, я правильно понял проблему сейчас. Добавил одну строчку в мой фрагмент кода ниже, которая должна решить проблему.

default: $('#alertDiv').hide();

Протестировал ваш код в Firefox 69.0.2, и он заработал. См. Мою тестовую страницу, где я скопировал и вставил ваш код ниже.

Проверяли ли вы консоль разработчика вашего браузера на наличие ошибок Javascript, мешающих правильному выполнению скрипта?

Возможно, ваша страница еще не полностью загруженакогда ваш Javascript уже выполняется и пытается получить доступ к узлам DOM, которые еще не существуют. Вы упаковываете свой реальный код в документ document.ready? См. https://learn.jquery.com/using-jquery-core/document-ready/

Об общем коде: есть ли какая-либо деловая причина, почему вы идете здесь с оператором switch вместо единственного оператора if, проверяющего, меньше ли значение или равно 2005? Примерно так:

if (parseInt(this.value) < 2005) {
    $('#alertDiv').show();
} else {
    $('#alertDiv').hide();
}

$('#membership-form-personumber').on('keyup change', function (c) {

    //initially hide all
    if (this.value.length < 4) {
        $('#alertDiv').hide();
    }
    else {

        switch (parseInt(this.value)) {

            case 2019: case 2018: case 2017: case 2016: case 2015: $('#alertDiv').show(); break;
            case 2014: case 2013: case 2012: case 2011: case 2010: $('#alertDiv').show(); break;
            case 2009: case 2008: case 2007: $('#alertDiv').show(); break;
            // This line should fix your issue
            default: $('#alertDiv').hide();
        }

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <div class="alert alert-danger alert-dismissible" style="display: none;" id="alertDiv"> <strong>Note!</strong>
        <p>At the moment we cannot accept any players born 05 or earlier beacuse we currently are too many.</p>
    </div>
    <input id="membership-form-personumber">
</form>