javascript - 验证文本输入并在输入长度为 5 个字符时输出“完成”div

Question

我已经用 javascript 编写了这段代码，但是我必须使用 JQuery 使它工作，我已经包含了 javascript 函数和 jquery 尝试，但是我无法弄清楚我的 jquery 尝试有什么问题，有人可以帮助我吗？

Javascript工作：

function done()
{
    var valid = document.getElementById("text2").value.length;
    if (valid > 5)
    {
        document.getElementById('one').innerHTML += "<div class='done rotateone wiggler'></div>";
        document.getElementById('one').className += "grey";
    }

jQuery尝试：

$(document).ready(function(){
    //Validates the title field is at least 5 characters long.
    $("#text2").done(function(){
        var value = $(this).val();
        if (value.length >= 5)
        {
            $("#one").append("<div class='done'></div>");
        }
    });

Answer 1

您可以使用您的done()功能，只需添加小的更改以适应 jQuery

function done()
{
    var valid = $("#text2").val().length;
    if (valid > 5)
    {
        $('#one').append("<div class='done'></div>");
        $('#one').addClass("grey");
    }
}

Answer 2

看起来您想立即执行您的功能？（查看编辑以了解我添加.blur()事件处理程序的原因）好吧，这就是我的做法：

$(document).ready(function() {
    $('#text2').blur(function() { // Listen to the "onblur" event on the element
        if (this.value.length > 5) { // No need for jQuery there
            $('#one')
                .append('<div class="done"></div>')
                .addClass('grey')
        }
    })
})

看看我如何通过在单个元素上链接函数来仅使用对 DOM 的一次调用？这是实用和有效的。

顺便说一句，由于许多原因（包括性能），innerHTML 不好，更喜欢.append()在 jQuery 和.appendChild()javascript 中。

编辑：看起来你希望它在onblur事件中激活。我编辑了我的代码。