Question

目标：当输入不是有效/正确的输入时，将输入字段的边框颜色更改为红色。恩。如果在密码字段中，输入是＆＃34; abcd＆＃34;边框颜色应为红色，因为＆＃34; abcd＆＃34;不在8-20个字符之间。

问题：当一个css类（通过javascript）添加到html输入时，结果是该行和任何后续行的javascript永远不会运行。

<style type="text/css">
.redborder { border:1px solid red; }
</style>

<script>
$(document).ready(function() {
    $('#email').keyup(function() {
        checkInput("email");
    });
});

function checkInput(id) {
    alert("Got here");
    var field = document.getElementById("email");
    if (field.value == null || field.value === "") {
        alert("Adding 'redborder' class");
        field.addClass('redborder');
        alert("Added 'redborder' class");
    } else {
        alert("Removing 'redborder' class");
        field.removeClass('redborder');
        alert("Removed 'redborder' class");
    }
}
</script>

在此代码中，当我在电子邮件字段中输入时，＆＃34; Got Here＆＃34;和＆＃34;删除＆＃39; redborder＆＃39;类＆＃34;警报出现了。＆＃34;删除红色边框＆＃39;类＆＃34;然而警报和红色边框永远不会出现。

Answer 1

您正在通过DOM对象访问元素，以访问您需要使用jquery对象调用的jQuery方法。

$(field).addClass('redborder');

Answer 2

您需要在字段上使用jQuery选择器。变化：

var field = document.getElementById("email");

为：

var field = $('#email');

.addClass()是一个jQuery方法，而不是本机JavaScript方法。通过使用jQuery选择器，您可以自动访问附加到jQuery原型对象的所有方法。

请记住，jQuery对象是本机DOM对象的超集。也就是说，jQuery对象具有所有本机DOM属性和方法，以及由jQuery和页面上的任何jQuery扩展添加的属性和方法。

javascript addClass没有运行

2 个答案: