javascript - 无法使最接近的元素与查询选择器一起使用

Question

我有一个用于日历事件(元素)的 JavaScript:

data.forEach(function(item) {
      var d = new Date(item.event_date);
      var datestring = d.getFullYear() + "," + (d.getMonth() + 1) + "," + d.getDate();
      events.push({
            'Date': new Date(datestring),
            'Title': item.event_name + `<div><span class="popuptext" id="myPopup">
     ${item.event_description}</span></div>`,
            'Link': function()({
                document.querySelector('#myPopup').closest("#myPopup")
                .classList.toggle("show");
              }
            },
          );

相关的html是这样的:

<li class="cld-day currMonth"><p class="cld-number eventday">14<span class="cld-title">    
<a href="#">Children's Day<div><span class="popuptext show" id="myPopup">    
on the occassion of birthday of Pandit Jawaharlal Nehru</span></div></a></span></p></li>

<li class="cld-day currMonth"><p class="cld-number eventday">20<span class="cld-title">
<a href="#">Test Event Nov<div><span class="popuptext" id="myPopup">
Testing event in November detail</span></div></a></span></p></li>

现在，当我单击第一个元素时，弹出窗口会正确显示，但是当我单击第二个元素时，弹出窗口会显示第一个元素及其上方的元素。

我该如何解决这个问题？

Answer 1

每个链接的 ID 必须是唯一的。

只需从日期创建一个唯一的 ID 即可开始。

data.forEach(function(item) {
  var d = new Date(item.event_date);
  var datestring =
    d.getFullYear() + "," + (d.getMonth() + 1) + "," + d.getDate();
  var id = (d.getTime() / 1000) | 0;
  events.push({
    Date: new Date(datestring),
    Title:
      item.event_name +
      `<div><span class="popuptext" id="${id}">
             ${item.event_description}</span></div>`,
    Link: function() {
      document
        .getElementById(id)
        .classList.toggle("show");
    }
  });
});

编辑:使用 .getElementById 而不是 .querySelector。