Question

我正在制作一个包含大量参考文献的网页。我要在按下一个引用时显示模式，以显示有关该引用的更多数据。我通过一个引用实现了这一点，但是现在当我插入更多引用时，它不会打开其他模式，但是如果我在课堂上这样做，如果我离开id的话，总是一样的（是的，我知道，我没有提前考虑并这样做了） ID），它只会打开第一个，其他人甚至都不会打开。

这是我的HTML代码：

<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/1.jpg">
    <a id="myBtn"></a>
    <div id="myModal" class="modal1">
        <!-- Modal content -->
        <div class="modal1-content">
            <span class="close1">&times;</span>
            <h2>REFERENCE NAME</h2>
            <div class="post1-container">
                <div class="post1-content">
                    <p>nekitext</p>
                    <h3>Neki header</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/1.jpg">
    <a id="myBtn"></a>
    <div id="myModal" class="modal1">
        <!-- Modal content -->
        <div class="modal1-content">
            <span class="close1">&times;</span>
            <h2>REFERENCE NAME</h2>
            <div class="post1-container">
                <div class="post1-content">
                    <p>nekitext</p>
                    <h3>Neki header</h3>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的JS：

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


// Get the button that opens the modal

var btn = document.getElementById("myBtn");
console.log(btn);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// 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";
    }
}

我尝试使用onclick事件来确定哪个标签是myBtn，但在这种情况下，它仅适用于一种模式。其他人则不会打开或工作。

PS：我将模态固定在图像上。

编辑：

我知道我有多个ID，并且这些ID在HTML中是唯一的。我没有足够提前计划，因为我以为我只有一个项目，而现在却有多个项目，系统崩溃了。一定要有一个比给每个项目一个不同的ID更好的方法，对吗？

EDIT2：

我不想使用ID。问题是有关如何确定要打开哪个模式的javascript。如果我对类进行操作，它将仅打开一个始终具有相同内容的模式。

Answer 1

您需要为每个按钮指定一个通用的类名，即：

<a class="myButton"></a> // For the buttons

然后遍历那些（和结束跨度），并为每个监听器添加一个事件侦听器，即：

const buttons = document.querySelectorAll(".myButton");
const spans = document.querySelectorAll(".close1");

for(let i=0; i< buttons.length; i++) {
    buttons[i].addEventListener("click", openModal);
}

for(let i=0; i< spans.length; i++) {
    spans[i].addEventListener("click", closeModal);
}

function openModal(e) {
    e.preventDefault();
    const currentModal = e.currentTarget.parentNode.getElementsByClassName("modal1")[0];
    currentModal.style.display = "block";
}

function closeModal(e) {
    const currentModal = e.currentTarget.closest(".modal1");
    currentModal.style.display = "none";
}

这将找到与所单击按钮最接近的模态，并切换该模态，而不是对模态ID进行硬编码引用。

编辑-See it in action

希望有帮助！

如何确定从多个模态中打开哪个模态？

1 个答案: