HTML

Question

我试图根据随机生成的ID显示不同的弹出窗口。我正在使用的代码如下（这是使用WordPress中的工具集类型完成的）：

    <div class="id-select" id="[random_number]">
    <div class="service-container">
        <div class="service-image">
            [types field="picture"][/types]
        </div>
        <div class="service-text">
            <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
            <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
            <p><strong>Price:</strong> [types field="price"][/types]</p>
        </div>
    </div>
</div>
<!-- The Modal -->
<div id="myModal-custom" class="modal-custom">

    <!-- Modal content -->
    <div class="modal-content-custom">
        <span class="close-custom">×</span>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                  <div class="service-image">
                    [types field="picture"][/types]
                  </div>
                </div>
                <div class="col-md-6">
                    <div class="service-text">
                        <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
                        <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
                        <p><strong>Price:</strong> [types field="price"][/types]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

JavaScript如下：

// Get the modal
var modal = document.getElementById('myModal-custom');
// Get the button that opens the modal
      var ids = [];
      $('.id-select').each(function(i, el) {
        if (el.id == '') {
          return;
        }
        ids.push('#' + el.id);
      });
      //console.log(ids.join(','));

      $(ids.join(',')).on('click', function(e) {
        modal.style.display = "block";
      })
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-custom")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

我遇到的问题是，我在前端单击的任何项目都显示相同的模式框。无论如何，我能拿到它来拾取特定项目的正确模式框吗？

实时站点-http://79.170.40.172/tc-pinkfin.co.uk/memorials/cemetery/

Answer 1

当您不以任何方式在getter中对其参数化时，您如何期望模态有所不同？

var modal = document.getElementById('myModal-custom');

您总是要求相同的模态，因此它总是相同的。

您的页面上还有更多模式吗？

您是否以某种方式将不同的数据传递给该模式，而该模式却没有显示？

在您的页面上，我看到您显示带有图像和一些其他数据的框。猜猜你有那些图像+数据在一些数组中，例如：

const items = [
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
];

通常，您需要做的是将模态与每个item（从上面的数组中）关联起来

最好的时机是在创建页面上已有的框并单击以显示模态时（要循环执行，对吗？）。

可能的解决方案：

在创建每个框时，可以将click handler附加到它，指向特定的模态实例。
使用唯一ID扩展每个item对象，并以某种方式将该ID添加到每个项目的适当模式DOM元素中。例如data-modaluid="$uniqueIDFromItem" 与单击每个项目相比，将具有该ID的click方法绑定（也可以将其设置为data-itemuid=$uniqueIDFromItem或仅在click handler中绑定），然后通过该ID搜索适当的模式DOM节点。

有几种方法可以完成此操作，具体取决于页面的结构化方式和数据的处理方式。

HTML

<button>toggle modal 1</button>
<button>toggle modal 2</button>
<button>toggle modal 3</button>

<div class="modal">
  modal 1
</div>
<div class="modal">
  modal 2
</div>
<div class="modal">
  modal 3
</div>

Javascript

一般想法是通过唯一的ID（uid）将每个可点击项与模型连接起来。

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

document.addEventListener("DOMContentLoaded", () => {
  const modals = document.querySelectorAll(".modal")
  const buttons = document.querySelectorAll("button")

  let guids = []

  //create unique IDs for modals/buttons
  buttons.forEach(button => {
    guids.push(guid())
  })

  //set those IDs for buttons/modals with same order in array. Creating connections  1->1 2->2 3->3
  guids.forEach((guid, index) => {
    buttons[index].dataset.guid = guid
    modals[index].dataset.guid = guid
  })

  //add onClick event listener for each button
  buttons.forEach(button => {
    button.addEventListener("click", (e) => {
       //find proper div modal with same ID as clicked button
       const divModal = document.querySelector(`div[data-guid="${e.target.dataset.guid}"]`)
       //change its style when not visible assign "visible", otherwise assign "hidden"
       divModal.style.visibility = divModal.style.visibility !== "visible" ? "visible" : "hidden";
    })
  })
})

Codepen：

https://codepen.io/anon/pen/GXzOJv?editors=1011

信用

GUID方法从这里：Create GUID / UUID in JavaScript?

JavaScript-显示弹出窗口

1 个答案:

HTML

Javascript

信用