Question

基本上我正在研究一个简单的功能。但是，当我尝试addClass任何HTML元素时它仍然无法工作。

我有两个HTML元素

DocType下拉列表
DocNumber的TextBox。

根据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

按照提供的小提琴，你忘记了两件事你错过了jquery图书馆 2. $('#ddlDocType')应在$(document).ready内检查下面更新的代码段。

＆＃13;

    $(".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");
    }
    });

＆＃13;

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

＆＃13;

使用Jquery将类添加到TextBox的问题

2 个答案: