Как я могу динамически изменить идентификатор элемента? - PullRequest
Новая
       35

Как я могу динамически изменить идентификатор элемента?

0 голосов
/ 05 июля 2019

Я использую Statamic для бэкенда сайта, и у меня есть коллекция продуктов с изображениями и описаниями, добавленными к ним. Когда вы щелкаете по изображению продукта, в передней части он открывает лайтбокс, в котором есть дополнительные изображения этого продукта. В настоящее время мой исходный код показывает, что изображения загружаются правильно, но они не отображаются правильно. Я определил, что это потому, что он продолжает загружать первый лайтбокс, который подключен к первому продукту во время цикла. Мне нужно иметь возможность изменять идентификаторы на каждом лайтбоксе, чтобы код открывал правильное поле.

Я попытался увеличить идентификаторы в javascript и изменить их, я не уверен, правильно ли я это сделал или нет, но лайтбокс не открывается, если я это делаю. Я также попытался использовать class вместо 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 }}

Когда лайтбокс открывается, он должен отображать основное изображение в увеличенном виде, а затем меньшие изображения, классифицированные как столбцы, внизу, чтобы вы могли щелкать и просматривать их в зависимости от продукта, на который вы нажимаете. В настоящее время он берет первый продукт, и это одно изображение, и помещает его на каждое изображение, на которое вы нажимаете, поскольку я выполняю поиск по идентификатору.

...