部分视图的 JavaScript 仅更改第一个部分

Question

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

<div id="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 id="SourceFromSelect" asp-for="Medias.SourceFrom" asp-items="Html.GetEnumSelectList(typeof(SourceFromEnum))" style="width:85%;" class="btn border-dark" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <option class="dropdown-item" selected>Select</option>
                    </select>
                    <span asp-validation-for="Medias.SourceFrom" class="text-danger"></span>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div id="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile1">
                    </div>
                    <div id="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" id="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

这是它的脚本：

 document.getElementById("mediaFile").style.display = "none";

    $('#SourceFromSelect').change(function () {
        var e = document.getElementById("SourceFormSelect");
        var strUser = e.options[e.selectedIndex].value;
        if (strUser == 6) {
            document.getElementById("mediaFile").style.display = "inline-block";
            document.getElementById("mediaLink").style.display = "none";           
        }
        else {
            document.getElementById("mediaFile").style.display = "none";
            document.getElementById("mediaLink").style.display = "inline-block";           
        }
    })

最后这里是我调用局部视图的地方：

<div id="MediaList">
        @for (i = 0; i < MediaCount; ++i)
        {
            <partial name="_MediaPartial" />
        }
</div>

Answer 1

兄弟！您的局部视图中有标识符 id="MediaFile" 和 id="MediaLink"。如果您在 div（带有 id="MediaList" 的那个）中加载所有部分视图，您最终会得到多个带有 id="MediaFile" 和 id="MediaLink" 的 divs。

根据html性质，赋予元素的id应该是唯一的，这在你的情况下不是。这就是为什么您的 JavaScript 代码仅适用于第一个局部视图。

我建议您为每个部分视图 div 提供唯一 ID，而不是 id="MediaFile" 和 id="MediaLink"。

希望这能回答您的问题。

Answer 2

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

 $('.MediaFile').css('display', 'none');

    $('.AddMedia').on('change', 'select', function (e) {
        //console.log($(this).parents(".AddMedia"));
        changeFile(e, $(this).parents(".AddMedia"));
    });

    function changeFile(e, parent) {
        // console.log(e, parent);
        let el = e.target;
        var strUser = el.options[el.selectedIndex].text;
        console.log(el, parent.find('.MediaFile'));
        if (strUser == "Phone or Computer") {
            parent.find('.MediaFile').css('display', 'inline-block');
            parent.find('.MediaLink').css('display', 'none');
        }
        else {
            parent.find('.MediaLink').css('display', 'inline-block');
            parent.find('.MediaFile').css('display', 'none');
        }
    }

部分视图的 JavaScript 仅更改第一个部分

Partial View's JavaScript only changing first Partial

javascript

html

asp.net-core

razor

partial-views