如何使用 static 变量制作 js function？ 我如何为页面中的每个图像运行这些功能？

Question

I have a page that contains a list of photos where users may want to input just a part of the images to be processed in the backend.

I used CropperJs to crop the images and it did work but when I provided the variable names manually from the console.

here's my functions:

 {% 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 %} 

If i replace {{image.pk}} with 53 for example or any valid/existing number the modal with this number as id will work fine so how should I repeat these function with the different pks should I just replace it with classes?

Answer 1

First of all, did you checked, if {{ image.pk }} is not empty or nullable in this case? Secondly, you override your jQuery method definition, every time when the loop execute. So for 10 images you get 10 $(".js-zoom-in") definition etc. Try move your loop into jQuery method.