时间戳

首页 > 解决方案 > onClick 函数或模式的限制？

javascript - onClick 函数或模式的限制？

问题描述

我确信这是非常简单的事情。基本要点是我有一个由 8 个图像组成的网格，一旦你将鼠标悬停在图像上，就会给出一个简介和一个按钮来提供更多信息。单击按钮，会弹出一个模式。

这一切都在前 5 个元素上完美运行，但此后就失败了。

完整的演示在 CodePen

代码的简化版本如下： 所有按钮如下：

HTML

<button id="myBtn" class="myBtn btn">Read More</button>

所有 Modals 如下所示：

HTML       
<!-- Modal 1 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <p>Content</p>
  </div>
</div>

<!-- Modal 2 -->
<div id="myModal2" class="modal">
  <div class="modal2-content">
    <span class="close">×</span>   
                <p>Modal 2 content</p>
  </div>
</div>

这对每个模态重复 8 次。JS如下：

JS
var modal = document.getElementsByClassName('modal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close");


btn[0].onclick = function() {
    modal[0].style.display = "block";
}

btn[1].onclick = function() {
    modal[1].style.display = "block";
}

btn[2].onclick = function() {
    modal[2].style.display = "block";
}

btn[3].onclick = function() {
    modal[3].style.display = "block";
}

btn[4].onclick = function() {
    modal[4].style.display = "block";
}

btn[5].onclick = function() {
    modal[5].style.display = "block";
}

btn[6].onclick = function() {
    modal[6].style.display = "block";
}

btn[7].onclick = function() {
    modal[7].style.display = "block";
}


span[0].onclick = function() {
    modal[0].style.display = "none";
}

span[1].onclick = function() {
    modal[1].style.display = "none";
}
span[2].onclick = function() {
    modal[2].style.display = "none";
}
span[3].onclick = function() {
    modal[3].style.display = "none";
}
span[4].onclick = function() {
    modal[4].style.display = "none";
}
span[5].onclick = function() {
    modal[5].style.display = "none";
}
span[6].onclick = function() {
    modal[6].style.display = "none";
}
span[7].onclick = function() {
    modal[7].style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

这对于前 5 次按钮点击来说很好，但是最后 3 次在点击按钮时不会出现。

但是，如果您随后单击前 5 个按钮之一 - 原始模态显示在您刚刚单击的按钮的模态顶部。

连续的 onClick 脚本有限制吗？或者 jQuery 中有什么东西不允许超过 5 个模式 - 或者这是我犯的一个简单的编码错误（这可能是最有可能的！）

我不知道发生了什么，所以任何帮助都会很棒。＆在任何人建议之前 - 我不想使用引导程序（JS），因为它会与我网站上的其他代码冲突。

提前谢谢了！

标签： javascripthtmljquerycss

解决方案

您缺少 的结束</div>标记myModal5。然后浏览器将其他模式嵌套在里面myModal5，这就是为什么不显示

<!-- Modal 5 -->
<div id="myModal5" class="modal">
    <div class="modal5-content">
        <span class="close">×</span>
        <h3> Targeting</h3>
        <div class="divider divider-end div1 ldiv" data-aos="fade-right">
            <p>Through audience development we can tailor keyword groups, adverts and landing pages to suit not only the
                consumers search term, but your marketing message.</p>
            <p>Through this direct targeting we can ensure we optimise what we present to individual search, ensuring we
                present the right message at the right time, all of the time.
            </p>
        </div>
    </div>
</div> <!-- <= missing this tag here -->

推荐阅读