Django for loop {% for %} 中的数据未为 Modal 加载

Question

我正在尝试在 HTML 中显示来自 django for 循环的信息。 HTML如下：

<div class="row">
            {% for product in page.object_list %}
            <div class="col-lg-3">
                <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
                <div class="box-element product">
                    <h6><strong>{{product.name}}</strong></h6>
                    <hr>

                    <a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a>

                    <div id="mySizeChartModal" class="ebcf_modal">

                      <div class="ebcf_modal-content">
                        <span class="ebcf_close">&times;</span>
                        <p>{{product.name}} FROM {{product.store}} £{{product.price}}</p>
                      </div>

                    </div>

                    <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
                    <h4 style="display: inline-block; float: right"><strong>£{{product.price}}</strong></h4>

                </div>
            </div>
            {% endfor %}
        </div>

这适用于在网格中加载产品，但是当单击<a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a> 时，仅显示第一个产品的数据。我不确定这是为什么。除此之外，我还使用 JavaScript 将 Modal 显示为弹出窗口：

$(".button").click(function() {
  $("#mySizeChartModal").show();
});

$("#mySizeChartModal .ebcf_close").click(function() {
    $("#mySizeChartModal").hide();
});

CSS如下：

/**---------------------*/
/* Popup box BEGIN */
/* The Modal (background) */
.ebcf_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.ebcf_modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
}

/* The Close Button */
.ebcf_close {
    color: #aaaaaa;
    float: right;
}

.ebcf_close:hover,
.ebcf_close:focus {
    color: #000;
    cursor: pointer;
}

当我点击 Modal 弹出窗口时，有什么想法可以让我为每个产品加载数据吗？

Answer 1

您的模态框具有相同的 id，这就是为什么只有第一个有效的原因。相反，您可以使用 id="mySizeChart_{{product.id}}" 使它们独一无二，与模态框相同，即：id="mySizeChartModal_{{product.id}}"。然后，在您的 jquery 代码中只需使用 $(this).attr("id").split("_")[1] 获取 id 并仅显示相关的模态。

演示代码：

$(".button").click(function() {
  var id = $(this).attr("id").split("_")[1]
  $(`#mySizeChartModal_${id}`).show();
});

$(".ebcf_close").click(function() {
  $(".ebcf_modal").hide();
});

.ebcf_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.ebcf_modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 65%;
}


/* The Close Button */

.ebcf_close {
  color: #aaaaaa;
  float: right;
}

.ebcf_close:hover,
.ebcf_close:focus {
  color: #000;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="row">

  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc</strong></h6>
      <hr>
      <!--add id="mySizeChart_{{product.id}}"-->
      <a id="mySizeChart_1" class="button" style="vertical-align:middle"><span>Prices</span></a>
      <!--add id="mySizeChartModal_{{product.id}}"-->
      <div id="mySizeChartModal_1" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc FROMxyz £23</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£23</strong></h4>

    </div>
  </div>
  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc2</strong></h6>
      <hr>

      <a id="mySizeChart_2" class="button" style="vertical-align:middle"><span>Prices</span></a>

      <div id="mySizeChartModal_2" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc2 FROMxyz £232</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£232</strong></h4>

    </div>
  </div>

</div>