使用Jquery向TextBox添加类时出现问题

Question

基本上我正在开发一个简单的功能。但是当我试图将addClass添加到任何HTML元素时，它就停留在某个部分上。

我有两个HTML元素

1. 下拉的DocType的
2. 文本框的DocNumber。

基于DocType中的选定值我需要更改DocNumber的类，它将处理DocNumber textBox的验证部分。

这里是我的脚本的代码。

$(document).ready(function() { 
    $(".number").keydown(function (e) { 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 || 
     (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
     (e.keyCode >= 35 && e.keyCode <= 40)) { 
     return; 
    } 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
     e.preventDefault(); 
     } 
    }); 
}); 

$('#ddlDoctype').on('change', function() { 
    var validateCriteria = $(this).find("option:selected").val(); 
    if (validateCriteria == "A") { 
    $("#txtDocNumber").addClass("minSize[8]"); 
    $("#txtDocNumber").addClass("number"); 
    $("#txtDocNumber").removeClass("minSize[12]"); 
} else if (validateCriteria == "E") { 
    $("#txtDocNumber").addClass("minSize[12]"); 
    $("#txtDocNumber").removeClass("minSize[8]"); 
    $("#txtDocNumber").addClass("number"); 
} else if (validateCriteria == "C") { 
    $("#txtDocNumber").removeClass("number"); 
} else { 
    $("#txtDocNumber").removeClass("number"); 
} 
}); 

这里的好一点需要注意的是，当我添加minSize[8]到文本框它被分配但数量级是没有得到分配到文本框。当我在手表中添加该部分时，我得到number类正在分配的结果，但它不起作用并允许用户输入字母。

即使尝试了很多方法来解决这个问题，我也无法摆脱它。如果有任何帮助，我会很感激你。

Answer 1

您需要将更改事件放入文档中，并需要注册.number与on的keydown事件。

 $(document).ready(function() { 
      $(document).on('keydown', '.number', function (e) { 
       if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 || 
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
        (e.keyCode >= 35 && e.keyCode <= 40)) { 
        return; 
       } 
       if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
        e.preventDefault(); 
       } 
      }); 
      $('#ddlDoctype').on('change', function() { 
       var validateCriteria = $(this).find("option:selected").val(); 
       if (validateCriteria == "A") { 
        $("#txtDocNumber").addClass("minSize[8]"); 
        $("#txtDocNumber").addClass("number"); 
        $("#txtDocNumber").removeClass("minSize[12]"); 
       } else if (validateCriteria == "E") { 
        $("#txtDocNumber").addClass("minSize[12]"); 
        $("#txtDocNumber").removeClass("minSize[8]"); 
        $("#txtDocNumber").addClass("number"); 
       } else if (validateCriteria == "C") { 
        $("#txtDocNumber").removeClass("number"); 
       } else { 
        $("#txtDocNumber").removeClass("number"); 
       } 
      }); 
     }); 

Answer 2

按照提供的小提琴，你已经忘了一点东西
1.您已经错过了jQuery库
2. $('#ddlDocType')应低于里面$(document).ready
检查更新片断..

$(".number").keydown(function (e) { 
 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 || 
 
     (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
 
     (e.keyCode >= 35 && e.keyCode <= 40)) { 
 
     return; 
 
    } 
 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
 
     e.preventDefault(); 
 
     } 
 
    }); 
 

 
    $('#ddlDocType').on('change', function() { 
 
     var validateCriteria = $(this).val(); 
 

 
     if (validateCriteria == "A") { 
 
     $("#txtDocNumber").addClass("number"); 
 
    } else if (validateCriteria == "E") { 
 
     $("#txtDocNumber").addClass("number"); 
 
    } else if (validateCriteria == "C") { 
 
     $("#txtDocNumber").removeClass("number"); 
 
    } else { 
 
     $("#txtDocNumber").removeClass("number"); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Document Type: 
 
<select id="ddlDocType"> 
 
    <option value="A">Pan</option> 
 
    <option value="E">Adhar</option> 
 
    <option value="E">Passport</option> 
 
    <option value="D">Driving Licence</option> 
 
</select> 
 
    </br> 
 
    </br> 
 
    Document Number: <input type="text" name="docNum" id="txtDocNumber"><br>