Javascript 使用滑块更改元素样式（输入范围）

我有一个变量/对象，它的键值对

元素id:opacity

称为container（示例中的第60行）

For循环对该集合中的每个

id

进行迭代，并在该元素顶部创建滑块。该滑块的起始值与

opacity

相同

滑块侦听并应更改

不透明度

，确实如此。但它只会更改创建的最后一个元素的css

“工作”代码可以在两个滑块上找到

我的问题是，为什么第一个元素上的滑块停止侦听事件，而创建的最后一个元素仍然侦听并适当更改css？此外，如果

容器

对象中只有一项，则代码

此外，我需要对逻辑进行哪些调整和更改才能使其正常工作？欢迎任何输入/内部信息。提前谢谢

函数createSlider（元素，html）{
/**
你好，世界！
**/
//创建消息元素
让message=document.createElement（'div'）；
/**
**/
//这里最好使用css类作为样式
message.style.cssText=“位置：绝对；颜色：红色”；
/**
位置：固定；颜色：红色；
**/
//分配坐标，别忘了“px”！
设coords=elem.getBoundingClientRect（）；
/**
DOMRect{x:551.5，y:73.833328247031，宽：160，高：17.333343505859375，顶：73.833328247031，右：711.5，底：91.166671752969，左：551.5}
**/
message.style.left=coords.left+“px”；
message.style.top=coords.top+“px”；
message.style.zIndex='1992'；
/**
551.5px
73.8333px
1992
**/
message.appendChild（html）；
返回消息；
/**
**/
}
//id=新价格
//为对象中的每个id生成滑块
函数生成器滑块（滑块的值）{
var new_slider=document.createElement（“输入”）；
新的_slider.setAttribute（“类型”、“范围”）；
new_slider.value=_slider的值_*100；
返回新的_滑块；
}
//更改id的样式
函数changeStyle（id、值）{
var元素=document.querySelectorAll（id）；
elements.forEach（（element）=>{
element.style.opacity=值；
});
console.log（“+id+”的值为“+value”）；
}
变量容器={
“#新价格”：“0.4”，
};
用于（容器中的id）{
变更样式（id，容器[id]）；
var first_元素=document.querySelector（id）；
var generate_slider=generateSlider（容器[id]）；
let slider=createSlider（第一个\u元素，生成\u滑块）；
document.body.append（滑块）；
生成\u slider.addEventListener（'input'，（）=>{
容器[id]=（generate_slider.value/100）.toString（）；
变更样式（id，容器[id]）；
});
};
/*--------------------
混血儿
---------------------*/
/*--------------------
身体
---------------------*/
*,
*：：之前，
*：：之后{
框大小：边框框；
}
身体，
html{
身高：100%；
字体系列：“开放式Sans压缩”，无衬线；
}
身体{
背景：-webkit线性梯度（75度，#d33f34 50%，#a61322 50.1%）；
背景：线性梯度（15度，#d33f34 50%，#a61322 50.1%）；
}
/*--------------------
购物卡
---------------------*/
.购物卡{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：350px；
背景:#f5；
盒影：0 10px 20px rgba（0,0,0,0.3）；
溢出：隐藏；
边界半径：5px；
填充：25px；
文本对齐：居中；
z指数：2；
}
.店铺卡数字{
保证金：0；
填充：0；
溢出：隐藏；
大纲：无！重要；
}
.店卡图img{
利润率：-95px 0-60px；
宽度：110%；
}
.购物卡.头衔{
字号：900；
文本转换：大写；
字体大小：30px；
颜色：23211f；
边缘底部：5px；
}
.购物卡{
字号：17px；
不透明度：.8；
利润底部：3倍；
}
.购物卡{
填充：20px 20px 5px；
}
.shop card.cta:：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.购物卡.价格{
浮动：左；
颜色：#FF3100；
字体大小：22px；
字号：900；
垫顶：2件；
-webkit过渡：彩色。3s易于输入输出；
过渡：颜色。3s易于输入输出；
利润上限：4倍；
}
.购物卡{
位置：相对位置；
z指数：1；
浮动：对；
显示：内联块；
字体大小：13px；
字号：900；
文本转换：大写；
颜色：#FF3100；
填充：12px 18px；
光标：指针；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
线高：.95；
边界：无；
背景：无；
大纲：无；
边框：1px实心#FF3100；
边界半径：20px；
溢出：隐藏；
}
.shop card.btn.bg{
宽度：101%；
身高：101%；
显示：块！重要；
z指数：-1；
不透明度：0；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
背景：-webkit线性梯度（315度，#a61322，#d33f34）；
背景：线性梯度（135度，#a61322，#d33f34）；
}
.购物卡.btn:悬停{
颜色：#fff！重要；
边框：1px实心透明！重要信息；
}
.购物卡.btn:hover.bg{
不透明度：1；
}
/*--------------------
圆点
---------------------*/
.圆点{
底部：-30px；
}
.圆点a{
位置：相对位置；
显示：块；
宽度：16px；
高度：16px；
}
.圆点跨度{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：6px；
高度：6px；
边界半径：50%；
}
.圆点圆点{
填充：无；
笔画宽度：1；
笔划线头：圆形；
行程：39；
行程偏移：39；
-webkit过渡：所有.9都易于输入输出；
过渡：所有9秒轻松退出；
-webkit转换：行程偏移0.5s；
过渡：行程偏移0.5s；
}
.圆滑的圆点。圆滑的活动圆{
笔划偏移：0；