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

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。