gpt4 book ai didi

javascript - 使用 JS,打开和关闭按钮可以工作,但转义总是尝试关闭最后一个模式

转载 作者:行者123 更新时间:2023-11-30 21:11:20 25 4
gpt4 key购买 nike

<分区>

我的按钮可以正常工作,但我不知道如何让转义键在正确的模式下工作。它总是“关闭”最后一个模式,不管我有多少。

这一切都在我的 for 循环中,所以我不明白为什么 thisModal 跟踪到正确的按钮,但不是 document.onkeydown 函数。

此外,请不要对使用 jQuery 发表评论:)。

const modalToggle = document.querySelectorAll(".button"),
modal = document.querySelectorAll(".modal"),
closeButton = document.querySelectorAll(".close");

if (modalToggle) {

for (i = 0; i < modalToggle.length; i++) {
let thisToggle = modalToggle[i];
let thisModal = modal[i];
let thisClose = closeButton[i];

thisToggle.addEventListener("click", () => openModal(thisModal));
thisClose.addEventListener("click", () => closeModal(thisModal));
document.onkeydown = (e) => {
if (e.keyCode == 27) {
console.log(thisModal); // Is always the LAST modal... why?
closeModal(thisModal);

}
}
};
}

function openModal(el) {
el.style.display = "block";
}

function closeModal(el) {
el.style.display = "none";
}
.modal {
display: none;
background: lightgray;
border: 1px solid black;
width: 50%;
height: 100px;
}
<button class="button">One</button>
<button class="button">Two</button>
<button class="button">Three</button>

<div class="modal">ONE
<button class="close">Close</button>
</div>

<div class="modal">TWO
<button class="close">Close</button>
</div>

<div class="modal">Three
<button class="close">Close</button>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com