Javascript 相同div中的事件委派

我是活动代表团的新手，在选择要更改的正确div时遇到困难。我有一个局部视图，可以在网页上显示多次。但是，当多次显示时，JavaScript仅适用于部分视图的第一个实例。因此，我尝试使用事件委托来解决我的问题，但它仍然只在第一个实例中起作用。我想可能是在任何时候我按Id选择，因为它们共享Id，它只选择它看到的第一个Id，因此只处理部分视图的第一个实例。以下是我的部分视图的HTML：

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

下面是它的脚本：

document.getElementById（“MediaFile”）.style.display=“无”；
const addMedia=document.querySelector（“addMedia”）
addMedia.addEventListener（'change'，函数（e）{
if（e.target.getAttribute（'id'）=='SourceFromSelect'）{
更改文件（e）；
}
});   
函数更改文件（e）{
//$（“#SourceFromSelect”）.change（函数（）{
console.log（例如target）
var e=document.getElementById（“SourceFromSelect”）；
var strUser=e.options[e.selectedIndex].text；
如果（strUser==“电话或计算机”）{
document.getElementById（“MediaFile”）.style.display=“内联块”；
document.getElementById（“MediaLink”）.style.display=“无”；
}
否则{
document.getElementById（“MediaFile”）.style.display=“无”；
document.getElementById（“MediaLink”）.style.display=“内联块”；
}
// })
}

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

@对于（i=0；i

正如@AlwaysHelping在评论中所说，

Id

选择器对于元素必须是唯一的。由于不能更改其id，因此可以使用

name

或

class

选择器

我根据你的代码做了一个演示，部分代码将id改为name。另外，我使用jquery，它更简单

局部视图：

<div name="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select name="SourceFromSelect" style="width:85%;" class="btn border-dark">
                        <option selected>Select</option>
                        <option value="1">Phone or Computer</option>
                        <option value="2">Other Media</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div name="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" name="exampleFormControlFile1">
                    </div>
                    <div name="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" name="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

资料来源：*
挑选
电话还是电脑
其他媒体
挑选一个文件
链接媒体

脚本：

<script>
    $("[name = MediaFile]").css("display", "none")

    $("[name = SourceFromSelect]").on('change', function () {
        var parent = $(this.parentElement.parentElement.nextElementSibling)
        if ($(this).find(":selected").text() == "Phone or Computer") {
            parent.find("[name = MediaFile]").css("display", "inline-block");
            parent.find("[name = MediaLink]").css("display", "none");
        }
        else {
            parent.find("[name = MediaFile]").css("display", "none");
            parent.find("[name = MediaLink]").css("display", "inline-block");
        }

    });

</script>

$（“[name=MediaFile]”）css（“显示”、“无”）
$（“[name=SourceFromSelect]”。在（'change'，函数（）{
var parent=$（this.parentElement.parentElement.nextElementSibling）
if（$（this）.find（“：selected”）.text（）=“电话或计算机”）{
parent.find（“[name=MediaFile]”）.css（“显示”、“内联块”）；
parent.find（“[name=MediaLink]”）css（“display”、“none”）；
}
否则{
parent.find（“[name=MediaFile]”）css（“display”，“none”）；
css（“显示”、“内联块”）；
}
});

结果：

<div name="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select name="SourceFromSelect" style="width:85%;" class="btn border-dark">
                        <option selected>Select</option>
                        <option value="1">Phone or Computer</option>
                        <option value="2">Other Media</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div name="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" name="exampleFormControlFile1">
                    </div>
                    <div name="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" name="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

---

id

选择器对于元素必须是唯一的。在输入上使用类或分配不同的

id

，我认为我做不到，它是从局部视图动态生成的html。除非有什么方法可以根据部分视图计数来更改id，否则我认为我只能使用相同的id。那么这就不对了。甚至自动生成。这似乎不是一个好的做法。必须是唯一的。

选择id

与

脚本代码id

不同，是否检查了拼写<代码>opps，我从错误的区域复制，它们在我的实际代码中是相同的。我更新了我的问题来解决它