Javascript未在页面加载时触发

Question

我的 javascript 在页面加载后工作，但它没有在初始加载时隐藏 detail1 和 detail2 div。我在调用视图时在我的代码隐藏中设置了值，但只有当用户在页面加载后更改当前值时才会触发 javascript。

这里是我的代码：

@using System.Runtime.InteropServices.ComTypes
@using MobileServiceForms.miscclasses
@using MobileServiceForms.Models
@model HomeModels.AsmeForms

@{
    ViewBag.Title = "Tank Inspection";
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    $('.UserType').change(function () {
      var value = $(this).filter(':checked').val();
      if (value === "Detailed") {
        $("#detailed1").show();
        $("#detailed2").show();
      }
      else if (value === "Summary") {
        $("#detailed1").hide();
        $("#detailed2").hide();
      }
    });
  });
</script>

<h2>@ViewBag.Title</h2>
<h3>@ViewBag.Message</h3>

<p>Please fill out the form below and click SUBMIT when you are done.</p>

<hr/>

<div>
  @using (Html.BeginForm("SaveAsmeForm", "Forms", FormMethod.Post))
  {
    <div class="editor-field">
      @Html.RadioButtonFor(m => m.SummaryOrDetailedEnum, "Detailed", new { @id = "Class_UTCompany", @class = "UserType" }) Detailed
      @Html.RadioButtonFor(m => m.SummaryOrDetailedEnum, "Summary", new { @id = "Class_UTCompany", @class = "UserType" }) Summary
    </div>

    <label class="baselabel labeltop lesserfont">Account Number</label>
    <label class="baselabel labelbottom">@Model.BranchNumber-@Model.AccountNumber</label>

    <label class="baselabel labeltop lesserfont">Tank Serial Number</label>
    <label class="baselabel labelbottom">@Model.TankSerialNumber</label>

    <label class="baselabel labeltop lesserfont">Date of Inspection</label>
    <label class="baselabel labelbottom">@DateTime.Now.ToShortDateString()</label>

    <label class="baselabel labeltop lesserfont">Tank Size</label>
    <label class="baselabel labelbottom">@Model.TankSize</label>

    <label class="baselabel labeltop lesserfont">Inspector's Name</label>
    @Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
    
<div id="detailed1">

  <label class="baselabel labeltop lesserfont">Inspection Type</label>
  @Html.DropDownListFor(model => model.InspectionType,
    new SelectList(Model.InspectionTypeList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })

  <label class="baselabel labeltop lesserfont">Relief Valve Date</label>

  @Html.DropDownListFor(model => model.ReliefValveMonth,
    new SelectList(Model.ReliefValveDateMonthList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })

  @Html.DropDownListFor(model => model.ReliefValveYear,
    new SelectList(Model.ReliefValveDateYearList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })

  <label class="baselabel labeltop lesserfont">Relief Valve Manufacturer</label>

  @Html.DropDownListFor(model => model.RelieveValveManufacturer,
    new SelectList(Model.ReliefValveManufacturerList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })


  <label class="baselabel labeltop lesserfont">Relief Valve Set Pressure 250 psi</label>

  @Html.DropDownListFor(model => model.ReliefValveSetPressure,
    new SelectList(Model.ReliefValveSetPressureList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })

  <label class="baselabel labeltop lesserfont">Relief Valve Capacity</label>

  @Html.DropDownListFor(model => model.ReliefValveCapacity,
    new SelectList(Model.ReliefValveCapacityList),
    "Select an option",
    new { @class = "form-control comboboxnoblock" })

</div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.WeepHoles, new { @class = "checkbox" })
      <label class="lesserfont">The weep holes are open and free of discharge.</label>
    </div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.Corrosion, new { @class = "checkbox" })
      <label class="lesserfont">There are no signs of corrosion, cracks, debris, tampering, or other mechanical damage.</label>
    </div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.Leakage, new { @class = "checkbox" })
      <label class="lesserfont">There is no leakage.</label>
    </div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.Discharge, new { @class = "checkbox" })
      <label class="lesserfont">The pressure relief device discharge meets the requirements of Clause 12.2.2 of CSA B51. (there is no obstruction to the path of discharge)</label>
    </div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.Seal, new { @class = "checkbox" })
      <label class="lesserfont">The Seal (where applicable) has not been broken.</label>
    </div>

    <div class="spacer">
      @Html.CheckBoxFor(m => m.RainCap, new { @class = "checkbox" })
      <label class="lesserfont">The Rain Cap, (where applicable) has been installed.</label>
    </div>

    <div id="detailed2">
      <div class="spacer">
        @Html.CheckBoxFor(m => m.Manufacturer, new { @class = "checkbox" })
        <label class="lesserfont">The manufacturer's data plate or markings are present in accordance with the applicable design code (UL, CSA, CGA, NB).</label>
      </div>

      <div class="spacer">
        @Html.CheckBoxFor(m => m.Pressure, new { @class = "checkbox" })
        <label class="lesserfont">The Set pressure of the pressure relief device meets the specified.</label>
      </div>

      <div class="spacer">
        @Html.CheckBoxFor(m => m.DischargeCapacity, new { @class = "checkbox" })
        <label class="lesserfont">The discharge capacity of the pressure relief device is equal to or greater than the boiler output capacity stamped on the boiler name plate and complies with clause 12.2.1.2</label>
      </div>
    </div>

    <input class="allformsbutton" type="submit" value="Submit" id="buttonAsmeDetailed" />
  }
</div>

在后面的代码中，我设置了 SummaryOrDetailedEnum 的值，它在表单上的 RadioButtonFor 中设置了正确的值，但它没有相应地隐藏 detail1 和 detail2 div。

如果 SummaryOrDetailedEnum 等于“详细”，那么我将显示这些 div id。如果它等于“摘要”，我将隐藏这些 ID。

有人知道我做错了什么吗？初始加载时值发生变化时，js不应该执行吗？

感谢您的帮助！

Answer 1

您的代码完全按照您告诉他的操作进行，您指示仅在有人更改复选框时才使 div 可见，因此，请保持 div 隐藏并且仅使它们在更改功能上可见。

 $(function () {
    $("#detailed1").hide();
    $("#detailed2").hide();
$('.UserType').change(function () {
  var value = $(this).filter(':checked').val();
  if (value === "Detailed") {
    $("#detailed1").show();
    $("#detailed2").show();
  }
  else if (value === "Summary") {
    $("#detailed1").hide();
    $("#detailed2").hide();
  }
 
})});