Как заставить JS функционировать со статическими переменными?Как я могу запустить эти функции для каждого изображения на странице? - PullRequest
Новая
       29

Как заставить JS функционировать со статическими переменными?Как я могу запустить эти функции для каждого изображения на странице?

0 голосов
/ 21 сентября 2019

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

Я использовал CropperJs, чтобы обрезать изображения, и он сделалработать, но когда я предоставляю имена переменных вручную из консоли.

вот мои функции: 

 {% for image in Patient_detail.images.all %}

var $image = $("#image{{image.pk}}");
var cropBoxData;
var canvasData;
$("#modalcrop{{image.pk}}").on("shown.bs.modal", function () {
  $image.cropper({
    viewMode: 1,
    aspectRatio: 1/1,
    minCropBoxWidth: 200,
    minCropBoxHeight: 200,
    ready: function () {
      $image.cropper("setCanvasData", canvasData);
      $image.cropper("setCropBoxData", cropBoxData);
    }
  });
}).on("hidden.bs.modal", function () {
  cropBoxData = $image.cropper("getCropBoxData");
  canvasData = $image.cropper("getCanvasData");
  $image.cropper("destroy");
});

// Enable zoom in button
$(".js-zoom-in").click(function () {
  $image.cropper("zoom", 0.1);
});

// Enable zoom out button
$(".js-zoom-out").click(function () {
  $image.cropper("zoom", -0.1);
});

$(".js-crop-and-upload").click(function () {
  var cropData = $image.cropper("getData");
  $("#id_x{{image.pk}}").val(cropData["x"]);
  $("#id_y{{image.pk}}").val(cropData["y"]);
  $("#id_height{{image.pk}}").val(cropData["height"]);
  $("#id_width{{image.pk}}").val(cropData["width"]);
  $("#formUpload{{image.pk}}").submit();
});

    {% endfor %}

Если я заменим {{image.pk}} на 53, например, или на любой действительный / существующий номер, модальныйс этим номером в качестве id будет работать нормально, так как я должен повторить эти функции с различными pks, если я просто заменил его на классы?

1 Ответ

0 голосов
/ 21 сентября 2019

Прежде всего, вы проверили, если {{image.pk}} не является пустым или обнуляемым в этом случае?Во-вторых, вы переопределяете определение метода jQuery каждый раз, когда выполняется цикл.Таким образом, для 10 изображений вы получите 10 $ (". Js-zoom-in") определение и т. Д. Попробуйте переместить цикл в метод jQuery.

...