ASP.NET 5 MVC 使用 jQuery 显示和隐藏 div 元素

Question

我试图在我的 mvc 应用程序中隐藏一些 html 表单。我正在使用 jQuery 来尝试隐藏我的元素。

这是我的剃须刀页面

<div id="Types" class="form-group">
            <label asp-for="Type" class="control-label"></label>
            <select asp-for="Type" class="form-control">
                <option>Select a Type</option>
                <option value="Book">Book</option>
                <option value="AudioBook">AudioBook</option>
                <option value="ReferenceBook">Reference Book</option>
                <option value="DVD">DVD</option>
            </select>
            <span asp-validation-for="Type" class="text-danger"></span>
        </div><div id="ThePages" class="form-group">
            <label asp-for="Pages" class="control-label"></label>
            <input asp-for="Pages" class="form-control" />
            <span asp-validation-for="Pages" class="text-danger"></span>
        </div>
        <div id="TheRunTime" class="form-group">
            <label asp-for="RunTimeMinutes" class="control-label"></label>
            <input asp-for="RunTimeMinutes" class="form-control">
            <span asp-validation-for="RunTimeMinutes" class="text-danger"></span>
        </div>
        <div id="Borrowable" class="form-group form-check">
            <label class="form-check-label">
                <input class="form-check-input" asp-for="IsBorrowable" /> @Html.DisplayNameFor(model => model.IsBorrowable)
            </label>
        </div>
        <div id="BorrowedBy" class="form-group">
            <label asp-for="Borrower" class="control-label"></label>
            <input asp-for="Borrower" class="form-control" />
            <span asp-validation-for="Borrower" class="text-danger"></span>
        </div>
        <div id="TheDate" class="form-group">
            <label asp-for="Date" class="control-label"></label>
            <input asp-for="Date" class="form-control" />
            <span asp-validation-for="Date" class="text-danger"></span>
        </div>

如您所见，我在元素上使用了 ID。 这是jQuery代码

function hideOnLoad() {
        $("#ThePages").hide();
        $("#TheRunTime").hide();
        $("#Borrowable").hide();
        $("#BorrowedBy").hide();
        $("#TheDate").hide();
    }



  $(document).ready(function () {
        hideOnLoad();
        $("#Types").change(function () {
            var value = $(this).val();
            if (value = "Book") {
                $("#ThePages").show();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "AudioBook") {
                $("#ThePages").hide();
                $("#TheRunTime").hide();
                $("#Borrowable").hide();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "ReferenceBook") {
                $("#ThePages").show();
                $("#TheRunTime").hide();
                $("#Borrowable").hide();
                $("#BorrowedBy").hide();
                $("#TheDate").hide();
            }
            else if (value == "DVD") {
                $("#ThePages").hide();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else {
                hideOnLoad();
            }
        });
    });

在第一个函数 loadOnDisplay() 中，我默认删除所有我不想显示的元素。 这里的想法是当用户选择例如“书”时，只有与书相关的元素对用户可见。 DVD 也是如此。

第一个功能有效，但是当我尝试选择一本书或 dvd 时，它会显示一些元素，但不是全部。当我尝试改变我的选择时，什么都没有发生。

我在这里错过了什么？

Answer 1

#Types 元素是 <div>，所以这不起作用：

$("#Types").change(function () {
    var value = $(this).val();
    //...
});

它可能确实在捕获change 事件，因为它冒泡了，但<div> 本身没有“价值”。不要使用<div>，而是使用<select>：

$("#Types select").change(function () {
    var value = $(this).val();
    //...
});