0

Для одного и того же элемента .form-field-2 выполняется один и тот же набор действий при blur и при keypress и keyup.
Можно ли как-то вынести набор вызываемых действий в отдельный блок или объединить вызов функции?

$('.form-field-2').blur(function () {
    var value = $(this).val();
    $(this).closest('.edit-task').css("display", "none");
    $(this).closest('li').find('.show-task').css("display", "block").find('label').html(value);
});

$('.form-field-2').bind('keypress keyup', (function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault();
        var value = $(this).val();
        $(this).closest('.edit-task').css("display", "none");
        $(this).closest('li').find('.show-task').css("display", "block").find('.show-task label').html(value);
    }
}));

1 ответ 1

2

Общие действия можно вынести в функцию и вызывать её в каждом обработчике:

function doSth() {
    var value = $(this).val();
    $(this).closest('.edit-task').css("display", "none");
    $(this).closest('li').find('.show-task').css("display", "block").find('label').html(value);
}

$('.form-field-2').blur(function () {
    doSth.call(this);
});

$('.form-field-2').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault();
        doSth.call(this);
    }
});

Здесь используется вызов функции через call для того, чтобы функция выполнялась в контексте нужного объекта (то есть, чтобы this внутри функции был таким, каким надо нам). Можно вызывать функцию и без этого, но тогда придётся передавать this в качестве аргумента:

function doSth(_this) {
    var value = $(_this).val();
    $(_this).closest('.edit-task').css("display", "none");
    $(_this).closest('li').find('.show-task').css("display", "block").find('label').html(value);
}

В этом случае обработчик будет выглядеть так:

$('.form-field-2').blur(function () {
    doSth(this);
});

Документация по this и call:

http://javascript.ru/Function/call

http://javascript.ru/tutorial/object/thiskeyword

1
  • Спасибо, работает!
    – Heidel
    Commented 2 дек. 2013 в 6:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.