局部视图'；s JavaScript仅更改第一部分

我有一个包含一些JavaScript的局部视图，这个局部视图可以在一个网页上显示多次。但是，当多次显示时，JavaScript仅适用于部分视图的第一个实例。我希望JavaScript只影响它自己的部分视图，因此当我更改

SourceFormSelect

时。以下是我的部分视图的HTML：

资料来源：*
挑选
挑选一个文件
链接媒体

下面是它的脚本：

document.getElementById（“mediaFile”）.style.display=“无”；
$（'#SourceFromSelect'）。更改（函数（）{
var e=document.getElementById（“SourceFormSelect”）；
var strUser=e.options[e.selectedIndex].value；
如果（strUser==6）{
document.getElementById（“mediaFile”）.style.display=“内联块”；
document.getElementById（“mediaLink”）.style.display=“无”；
}
否则{
document.getElementById（“mediaFile”）.style.display=“无”；
document.getElementById（“mediaLink”）.style.display=“内联块”；
}
})

最后，这里是我称之为局部视图的地方：

@对于（i=0；i

兄弟！在局部视图中有标识符id=“MediaFile”和id=“MediaLink”。如果加载div（id=“MediaList”）中的所有局部视图，您将得到多个id=“MediaFile”和id=“MediaLink”的div

根据html的性质，为元素提供的ID应该是唯一的，而您的情况并非如此。这就是为什么JavaScript代码只适用于第一个部分视图

我建议您为每个部分视图div指定唯一的id，而不是id=“MediaFile”和id=“MediaLink”

---

希望，这回答了您的问题。

我通过将ID更改为类（感谢您的建议）并将JavaScript更改为以下内容来解决此问题：

$（'.MediaFile'）.css（'display'，'none'）；
$（'.AddMedia'）。在（'change'，'select'，函数（e）上{
//log（$（this.parents（.AddMedia））；
changeFile（e，$（this）.parents（“.AddMedia”）；
});
函数更改文件（e，父级）{
//console.log（e，父级）；
设el=e.target；
var strUser=el.options[el.selectedIndex].text；
log（el，parent.find（'.MediaFile'）；
如果（strUser==“电话或计算机”）{
find（'.MediaFile'）.css（'display'，'inline block'）；
parent.find（'.MediaLink'）.css（'display'，'none'）；
}
否则{
find（'.MediaLink'）.css（'display'，'inline block'）；
find（'.MediaFile'）.css（'display'，'none'）；
}
}

请勿对多个项目使用ID。考虑使用“事件委派”。我不熟悉事件委托，我如何在这里使用它？它在底层HTMl可能发生变化时使用。我花了2个小时研究事件委派，但我无法让它对我的问题起作用。你能给我一个答案说明怎么做吗？