javascript循环显示模态按钮点击不起作用

Question

写了一个Javascript函数来显示按钮点击模式，工作完美，但必须重复56次。所以我写了一个循环，但新函数不工作，我不知道为什么。

原工作功能:

var target = document.getElementById('show1');
var currentOpacity = 0;
$(document).ready(function () {
$("#hide1").click(function () {
$("#details1").hide();
target.style.opacity = currentOpacity + 1;
});
$("#show1").click(function () {
$("#details1").show();
target.style.opacity = currentOpacity - 1;
});
});

所以:

var target = document.getElementById('show1');
var currentOpacity = 0;
$(document).ready(function () {
$("#hide1").click(function () {
$("#details1").hide();
target.style.opacity = currentOpacity + 1;
});
$("#show1").click(function () {
$("#details1").show();
target.style.opacity = currentOpacity - 1;
});
});
var target2 = document.getElementById('show2');
$(document).ready(function () {
$("#hide2").click(function () {
$("#details2").hide();
target2.style.opacity = currentOpacity + 1;
});
$("#show2").click(function () {
$("#details2").show();
target2.style.opacity = currentOpacity - 1;
});
});

重复56次

就是这样:

const elements = [];
for (let i = 1; i <= 56; i++) {
$(document).ready(function () {
document.getElementById('hide'+i).addEventListener('click',function ()
{
document.getElementById('details'+i).hide();
document.getElementById('show'+i).style.opacity = currentOpacity + 1; });
document.getElementById('show'+i).addEventListener('click',function () {
document.getElementById('details'+i).show();
document.getElementById('show'+i).style.opacity = currentOpacity - 1; });
});
}

但是这个循环不起作用。知道为什么吗?

Answer 1

从位开始

for (let i = 1; i <= 56; i++) {
$(document).ready(function () {

看起来错了…更有可能是

$(document).ready(function () {
for (var i = 1; i <= 56; i++) {