Question

我正在将Statamic用于网站的后端，并且我收集了一系列带有图片的产品，并在其中添加了说明。在前端，当您单击产品图片时，应该打开一个包含该产品其他图片的灯箱。目前，我的源代码显示了正确加载的图像，但显示不正确。我确定是因为它一直在加载第一个灯箱，该灯箱在循环过程中连接到第一个产品。我需要能够更改每个灯箱上的ID，以便代码打开正确的框。

我尝试增加javascript中的id并更改它们，但不确定是否做对了，但是如果这样做，灯箱将无法打开。我也尝试使用类而不是id，但是灯箱再次无法打开。

以下是用于在灯箱上打开和关闭模型的JS代码：

var num = 0;

// Get lightbox id and increment
function incrementId(num) {
  var unique_id = document.getElementById("myLightbox");
  unique_id.id = "myLightbox" + num.toString();
  num = num++;
}

// Open the Modal
function openLightbox(unique_id) {
  document.getElementById(unique_id).style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById(unique_id).style.display = "none";
}

这是HTML和Statamic代码：

 {{ collection:Products limit="9" as="entries" }}
  <div class="row">
      {{ entries scope="post" }}

      <div class="col-md-4">
        <a onclick="openLightbox(unique_id)">
            {{ asset:images }}
            <img src="{{ url }}" onclick="incrementId();openLightbox();currentSlide(1)" alt="Picket Fence" class="img-fluid circle hover-shadow">
          {{ /asset:images }}
            {{ post:title }}
        </a>
        <div id="myLightbox" class="lightbox">
          <div class="lightbox-content">
            <span class="close cursor" onclick="closeModal(unique_id)">&times;</span>
            {{ assets:images scope="lb" }}
              <div class="mySlides">
                <img src="{{ lb:url }}" alt="Picket Fence" class="mainImg">
              </div>
            {{ /assets:images }}

            <!-- Thumbnail image controls -->
            <div class="columnContainer">
              {{ assets:images }}
                <div class="column">
                  <img class="demo" src="{{ url }}" onclick="currentSlide({{ count }})" alt="Nature">
                </div>
              {{ /assets:images }}
            </div>
          </div>

          <div class="lbTextContainer">
            <p>Scalloped style, good neighbor vinyl picket fence with 1.5" wide, rectangle pickets.<br>Available heights range from 36" to 48", and standard panel width is 72".</p>
            <br><p>Looking for something a bit different? This fence can be customized to your unique needs!</p><br>
          </div>
          <div class="colorSection">
            <p>Assorted colors offered, including: white, sandalwood and adobe.</p>
            <div class="colorVariants">
              <div class="colorChoice white"></div>
              <div class="colorChoice sandalwood"></div>
              <div class="colorChoice adobe"></div>
            </div>
          </div>
        </div>

    </div>

    {{ /entries }}
  </div>
  {{ /collection:Products }}

灯箱打开时，它应以较大的形式显示主图像，然后在下方显示为列的较小图像，以便您可以根据单击的产品单击并浏览它们。目前，它采用的是第一个产品，它是一个图像，并将其放置在您点击的每张图像上，因为我按id拉动。

如何动态更改元素ID？

0 个答案: