Question

我的HTML是：

<table class="tableData" id="addUserTable" >
    <tr>
        <th class = "" name="errorMsgUser" id="errorMsg" value="" colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <th class= "" > Desired Username </th>
        <td><input name="desUname" type="text" id="desUname" size="30" value=""  /></td>
    </tr>
    <tr>
        <th class= "" > Password </th>
        <td><input type="password" name="password" id="password" value="" size="30" /></td>
    </tr>               
    <tr>
        <th></th>
        <td>
            <input name="submitAddUser" type="submit" id="submitAddUser" value="Add User" />
            <input type="button" value="Clear All" id="clearUpdateForm"></input>
        </td>
    </tr>
</table>

我做了一个通用函数，它清除一个表单并聚焦第一个输入框

$.clearForm = function() {
    var parentEle = $(this).closest('form');
    parentEle.find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }});
    parentEle.find('input[type=text]:first').focus();
};

我现在如何在表单上调用此函数？例如，给定上面的标记给出，我可以这样绑定函数：

$(function(){$("#clearUpdateForm").click(function(){
    $.clearForm (this);
});});

Answer 1

不，你将不得不做出决定。您要么将“this”作为参数传递给函数，要么您的函数作用于“this”的上下文。

1）传递元素作为参数：在这里，您使用“this”作为指向您希望函数执行的元素的指针。必须始终明确告知您的职能，了解如何开展业务。

$.clearForm = function(target) {
    var parentEle = $(target).closest('form');
    ...
};
$("#clearUpdateForm").click(function(){
    $.clearForm(this);
});

2）设置函数的上下文：这里你的函数作用于对象的上下文。我们可以使用.call或.apply手动设置上下文。

$.clearForm = function() {
    var parentEle = $(this).closest('form');
    ...
};
$("#clearUpdateForm").click(function(){
    $.clearForm.call(this);
});

坚持使用第一种技术。第二个对于创建可链接的jquery方法很有用，但不是你想在这里做的。

有很多资源可供阅读有关功能parameters / scope / ways-to-call-a-function

Answer 2

如果您像这样扩展jQuery.fn对象：

jQuery.fn.clearForm = function() {
  // `this` is a DOM element now.
  var parentEle = $(this).closest('form');
  doOtherStuff();
};

然后你可以在一个jQuery对象上轻松调用它，就像这样：

$('#clearUpdateForm').clearForm();

jQuery.fn对象定义了jQuery包装对象可用的方法。您对它所做的任何扩展都可用于所有jQuery包装对象。

使用“this”调用函数

2 个答案: