javascript - Partial View 的 JavaScript 只改变第一个 Partial

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>

标签： javascripthtmlasp.net-corerazorpartial-views

Answer 1

我通过将我的 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');
        }
    }