使用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>