Uncaught TypeError: this.rotate не является функцией

Question

Я создал функцию для поворота элемента div. Это прекрасно работает как отдельный код в HTML, и когда я попытался включить его в свой проект, функция поворота выдает ошибку: «Uncaught TypeError: this.rotate не является функцией». Мой проект основан на node версии 8, и я преобразовал HTML в Pug и использовал его. Я привел свой код ниже:

            var rotation = 0;
      $.fn.rotate = function(degrees) {
      $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
      '-moz-transform' : 'rotate('+ degrees +'deg)',
      '-ms-transform' : 'rotate('+ degrees +'deg)',
      'transform' : 'rotate('+ degrees +'deg)'});
      };
      $('.box').click(function() {
      rotation += 5;
      this.rotate(rotation);
      });

Answer 1

Вы должны использовать стрелочные функции или привязать функцию к 'this'

        var rotation = 0;
  $.fn.rotate =(degrees) => {
  $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
  '-moz-transform' : 'rotate('+ degrees +'deg)',
  '-ms-transform' : 'rotate('+ degrees +'deg)',
  'transform' : 'rotate('+ degrees +'deg)'});
  };
  $('.box').click(() => {
  rotation += 5;
  this.rotate(rotation);
  });

Обработка этого также отличается в стрелочных функциях по сравнению с обычными функциями.

Короче говоря, со стрелочными функциями привязки этого нет.

В обычных функциях ключевое слово this представляет объект, вызывающий функцию, который может быть окном, документом, кнопкой или чем-то еще.

В стрелочных функциях ключевое слово this всегда представляет объект, определяющий стрелочную функцию.

https://www.w3schools.com/js/js_arrow_function.asp

Удачи!