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>

当用户在文本字段“ membership-form-personumber”中输入数字值时，我想使用jquery检查该值，并在函数中满足条件的情况下在div上方显示div，但它不起作用。例如，即使输入2007，div也不会显示。我在做什么错了？

$('#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>

当满足jquery条件时隐藏div不起作用

1 个答案: