Javascript 使用Js为列表视图中的每个条目创建模式？

我有一个页面，其中有多个图像，我想让用户能够裁剪其中任何一个，所以我做了一个for循环，为每个图像创建一个模式，我还循环了js函数

这是我的情态

     {% for image in Patient_detail.images.all %}
    <div class="modal fade" id="modalCrop{{image.pk}}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Crop the photo</h4>
      </div>
      <div class="modal-body">
        <img src="" id="image{{image.pk}}" style="max-width: 100%;">
      </div>
      <div class="modal-footer">
        <div class="btn-group pull-left" role="group">
          <button type="button" class="btn btn-default js-zoom-in">
            <span class="glyphicon glyphicon-zoom-in"></span>
          </button>
          <button type="button" class="btn btn-default js-zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
      </div>
    </div>
  </div>
</div>
    {% endfor %}

但问题是模态从未显示，所以我真的不明白问题出在哪里？

---

我应该做些什么来实现这一点呢？第一个显示模式的函数有问题吗？有没有更简单的方法来实现这一点？我只希望用户能够指定他们想要的图像的一部分？

您不应该像for循环那样多次定义函数（我假设这是在一个模板文件中，因此在您的浏览器中可以看到多个

$（函数（）…

），定义一个函数并解析id（或您在模式上设置的另一个属性），以确定正在单击哪个图像。那么如何为每个图像模式运行脚本（获取坐标等）使用类作为选择器，而不是id。然后，无论打开哪个模式，函数都将触发。向所有模式添加属性（例如，

data img={{image.pk}

），在打开模式时获取该属性，然后知道打开的是哪个图像（

$image=$（“#image”）+$this.attr（'data-img'））

）抱歉，我真的不知道这对我有什么帮助我以前不得不为相同的图像创建一个删除模式，我用相同的概念创建了模式这个模式中的新东西是预览对我来说非常新的图像。你说模式没有显示，但使其显示的代码是通过点击

$（“#crop{{{image.pk}”）触发的

（

$（#crop1）

或

$（#crop2）

…在文档中），但模板中未显示这些内容。在开发工具中检查HTML源代码，在打开（'click'）函数中设置断点，

  {% for image in Patient_detail.images.all %}
 $(function () {

      /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
      $("#crop{{image.pk}}").click(function () {
            var img_src = document.getElementById("img{{image.pk}}").src
            $("#image{{image.pk}}").attr("src", img_src);
            $("#modalCrop{{imahge.pk}}").modal("show");
          }
      });

      /* SCRIPTS TO HANDLE THE CROPPER BOX */
      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");
      });

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

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

      /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
      $(".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 %}