使span-id替代javascript模式弹出中的li类

Question

我有一个公文包网页，点击一个项目，会弹出一个模式，里面有一个旋转木马库。

在我的.html页面中，项目分类如下

<li class="Project" data-modal="myModal_1">

javascript在Modal弹出时返回到类"Project"。我知道我想改变这一点，这样在点击id"PopUp"时，模式弹出窗口就不会被激活。当我试图在Javascript中更改这一点时，它不再起作用。在这一点上，我不知道如何解决。我想说的是，我试图更改id、span和class，但都没有成功。

window.onload = function () {
span = document.querySelectorAll("#PopUp");
document.querySelectorAll("#PopUp").forEach(LIelm=>{
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('#PopUp , .modal-content' )) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('#PopUp') ){
document.getElementById( currentParent.dataset.modal ).style.display = "block";
}
else {
currentParent.parentNode.style.display = "";
}
}

<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Irma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<p style="display:none;">
Typedesign
<br>
<span id="PopUp">
Images
</id>
</p>

</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">    
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<p>Some text in the Modal...</p>
</div>
</div>
</div>
</li>

Answer 1

您的javascript可能针对尚未创建的dom元素运行。

我建议使用jquery。1.在html页面的标题中加载jquery js。2.在html页面底部输入以下内容。

<script>
$( document ).ready(function) {
//stick you dom manipulation here.
})
</script>

Jquery是健壮的，与浏览器无关(除了旧版本的浏览器(。如果jquery无法完成，那么可能根本无法完成。