javascript addClass沒有運行

Question

目標：當輸入不是有效/正確的輸入時，將輸入字段的邊框顏色更改為紅色。 例如 如果在密碼字段中輸入的是“ abcd”，則邊框顏色應為紅色，因為“ abcd”不在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>

在此代碼中，當我在電子郵件字段中鍵入內容時，將顯示“此處提示”和“刪除'redborder'類”警報。 但是，“已刪除的”紅色邊框”類別”警報和紅色邊框永遠不會顯示。

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擴展所添加的屬性和方法。