Пропадает this в функции, как можно исправить?

Question

[neytan]

Добрый день. Написал небольшую функцию на jquery, но она не работает, я так понял что функция не видит this, как можно это исправить? Вот сама функция:

function filterShow() {
    $(this).parents('.accordion-item').find('.form-input').val('');
    $(this).parents('.accordion-item').find('.f-select-title').each(selectDefaultValue);
    function selectDefaultValue() {
      var defaultValue = $(this).data('default_title');
      $(this).text(defaultValue);
    }
  }
  $('.lft-close').on('click', function(){
    filterShow();
  });

Comments

[Rerurk]

кто нибудь мне объяснит нормально, нафига для таких целей jquery грузить?? очень искренне хочу понять нафиг он вообще в новом js нужен

Answer 1

[jj swift]

Передать filterShow в качестве коллбэка

Answer 2

[Дмитрий Беляев]

Самый простой вариант предложен уже jj swift $('.lft-close').on('click', filterShow);
Если все же без обертки никак, то this можно отдать в вызываемую функцию явно:

$('.lft-close').on('click', function(){
    filterShow.call(this);
});

Ну и стоит почитать теорию JS:
- Что такое контекст выполнения функции в JS
- Как работают методы call и apply у функции

Comments

[neytan]

Спасибо, обязательно почитаю теорию.

Answer 3

[Алексей]

Использовать стрелочную функцию в обработчике клика, либосразу указать эту функцию, а не заворачивать функцию в функцию

Comments

[neytan]

А как это будет выглядеть?

[Алексей]

$('.lft-close').on('click', () => {
    filterShow();
  });

или

$('.lft-close').on('click', filterShow);

[Дмитрий Беляев]

Алексей, со стрелочником работать не будет, так Вы только совсем потеряете this, который Вам jQuery отдает

Answer 4

[twobomb]

$('.lft-close').on('click', function(){
    filterShow.bind(this)();
  });

$('.lft-close').on('click', function(){
    filterShow.apply(this)
  });

$('.lft-close').on('click', function(){
    filterShow.call(this)
  });

Comments

[Дмитрий Беляев]

все-таки на qna не хватает дизлайков...