Javascript 当我单击其中任何一个对象时，循环中最后一个对象的脚本将启动

我一直在做一个页面，它把信息拉到一个JSON数组中，并在其中循环，显示一个带有模式窗口的可点击徽标，其中包含更多信息。由于我看不到的原因，当我点击其中任何一个模式时，只有阵列中的最后一个模式被触发

我曾尝试将脚本移动到数组中，并将其单独的副本与我正在使用的代码内联，但我完全不明白为什么它会这样做。通过手动设置索引值，我可以让它为数组中的第一项启动弹出窗口，但这是不可持续的，因为每次向JSON数组添加新对象时，我都必须不断添加新版本

jQuery（文档）.ready（函数（$）{
变量设置={
async:true，
跨域：是的，
网址：
"https://api-url.com",
方法：“获取”，
标题：{
接受：“api json”，
授权：“api密钥”
},
数据：“{}”，
contentType:“应用程序/json”，
数据类型：“json”
};
$.ajax（设置）.done（函数（响应）{
控制台日志（响应）；
for（response.content中的索引）{
$（“#赞助商”）。追加(
“\n”+
//模态
“\n”+
“×；”+响应。内容[index]。名称+”
\n”+
''
);
//获取模态
var modal=document.getElementById（[index]）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“modalBtn”+[index]）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“close”）[index]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
}
})
});

演讲者
/*模态（背景）*/
.赞助商模式{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退颜色*/
背景色：rgba（0,0,0,0.4）；/*黑色，不透明度*/
}
/*模态内容/框*/
.赞助商模式内容{
背景色：#fefe；
保证金：15%自动；/*15%从顶部和居中*/
填充：20px；
边框：1px实心#888；
宽度：80%；/*可能更多或更少，具体取决于屏幕大小*/
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}
更改

var modal = document.getElementById([index]);
var btn = document.getElementById("modalBtn" + [index]);
var span = document.getElementsByClassName("close")[index];

到

我想。
您还可以提供返回到AJAX调用的JSON对象吗？您好，您可以使用单个代码通过字符串分配id。但是这里var modal=document.getElementById（[index]），你曾经是interger@Aydin4ik-我已经添加了JSON@LDS-那么我是否需要将var模式更改为其他模式？重复：
let modal = document.getElementById([index]);
let btn = document.getElementById("modalBtn" + [index]);
let span = document.getElementsByClassName("close")[index];