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

Question

我有一个包含照片列表的页面，用户可能希望在其中输入要在后端处理的部分图像。

我使用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 的模态将正常工作，那么我应该如何用不同的 pk 重复这些 function 我应该用类替换它吗？

Answer 1

首先，您是否检查过 {{ image.pk }} 在这种情况下是否不为空或可为空？ 其次，每次执行循环时，您都会覆盖 jQuery 方法定义。 因此，对于 10 张图像，您将获得 10 $(".js-zoom-in")定义等。尝试将您的循环移动到 jQuery 方法中。