Блог

У меня проблема с пониманием того, как работают функции обратного вызова.

Я использую JCrop для обрезки множества изображений на странице. JCrop написан под впечатлением, что может быть только 1 изображение, которое необходимо обрезать:

jQuery(функция() {

               CropMe.Jcrop //CropMe is the class holding the image
              ({
                  aspectRatio: 1,
                  onSelect: updateCoords
              });
          }
      });
  

Когда он обновляет координаты с помощью «onSelect», он выводит координаты в функцию «updateCoords
«чтобы их можно было прочитать в форме позже при отправке:

функция updateCoords(c) {

$(‘.x’).val(c.x);

$(‘.y’).val(c.y);

$(‘.w’).val(c.w);

$(‘.h’).val(c.h); }

проблема в том, что у меня есть МНОГО Jcrops, созданных в соответствии с классом, а не конкретным идентификатором. Поэтому, когда вызывается updateCoords, он не знает, какие значения x, y, w, h обновлять.

Как бы я передал аргумент (в частности, CropMe) через объект option, чтобы я мог изменить 4 соответствующих значения

соответствующий код:jquery.jcrop,js

           CropMe.Jcrop //CropMe is the class holding the image
          ({
              aspectRatio: 1,
              onSelect: function(c) { updateCoords(c, CropMe); }
          });
  

Тогда updateCoords выглядело бы что-то вроде:

 function updateCoords(c, cropMeObject) {
  // cropMeObject is the CropMe object
}
  

Если вы хотите, чтобы this ключевое слово ссылалось на объект CropMe, использование замыкания должно сработать:

 CropMe.Jcrop //CropMe is the class holding the image
  ({
      aspectRatio: 1,
      onSelect:    (function(c) { return updateCoords(c); })(c,this);
  });     
  

теперь в функции updateCoords вы можете ссылаться на this .