Вызов функции с использованием «this»

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

Если вы расширяете объект 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.

Answer 2

Нет, вам придется принять решение.Либо вы передаете «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, но не для того, что вы хотите здесь сделать.

Существует множество ресурсов для чтения о функции параметры / область действия / способы вызова функции