Question

我试图让自己这个小的jQuery代码测试用户是否输入了什么。如果他们没有，请提醒他们错误。但是，我似乎遇到了一个小问题，在这种情况下，关键字$(this)似乎没有表现出应有的效果。请帮忙！

HTML：

<input type="text" id="name" name="name" />
<div id="error-div-1"></div>
<input type="text" id="hobbies" name="hobbies" />
<div id="error-div-2"></div>

JavaScript的：

function showError(i) {
    var errorDivID = "#error-div-" + i;

    if ($(this).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError(1);
});

$("#hobbies").on("blur", function() {
    showError(2);
})

Answer 1

您在this中引用的showError()是指window个对象;因为该函数在全局范围内而不在事件处理程序范围内。

将其传递给下面的函数，

function showError(i, element) {
    var errorDivID = "#error-div-" + i;

    if ($(element).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function () {
    showError(1, this);
});

Answer 2

根据您的html结构，通过在调用中使用$(this)可以更加简单：

    $("input").on("blur", function() {
        if($(this).val() === ""){
            $(this).next().html("Please enter something!");
        }else {
            $(this).next().html("");
        }

    });

以下是演示：http://jsfiddle.net/eypm8ozj/1/

Answer 3

您应该尝试将 $（this）传递给该函数。在该代码中，th $（this）的值现在是回调而不再是元素。

function showError(i, elem) {
    var errorDivID = "#error-div-" + i;

    if (elem.val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError(1, $(this));
});

$("#hobbies").on("blur", function() {
     showError(2, $(this));
});

Answer 4

您可以在调用showError方法

时传递this

<script>
        function showError(i, element) {
            var errorDivID = "#error-div-" + i;

            if ($(element).val() === "") {
                $(errorDivID).html("Please enter something!");
            } else {
                $(errorDivID).html("");
            }
        }

        $("#name").on("blur", function() {
            showError(1, this);
        });

        $("#hobbies").on("blur", function() {
            showError(2, this);
        })
    </script>

或者您可以在showError中更改逻辑，如下所示

<script>
        function showError() {

           if ($(this).val() === "") {
                $(this).next('div').html("Please enter something!");
            } else {
                $(this).next('div').html("");
            }
        }

        $("#name").on("blur", showError);

        $("#hobbies").on("blur", showError);
    </script>

您可以像下面这样对逻辑进行编码 -

$("#name, #hobbies").on("blur", function(){
     if($(this).val()==""){
           $(this).next('div').html("Please enter something!");
     } else {
           $(this).next('div').html("");
     }

  });

<强> JSFiddle Demo

注意： - 请取消注释相关的代码段以使用JSFiddle演示链接

Answer 5

要正常使用此功能，您可以使用.call()来“修改”功能的范围

function showError(i) {
    var errorDivID = "#error-div-" + i;

    if ($(this).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function() {
    showError.call(this, 1);
});

$("#hobbies").on("blur", function() {
    showError.call(this, 2);
});

这使您的功能代码保持不变。

如何在事件委托方法中使用jQuery $（this）？

5 个答案:

更多

JSFiddle