如果是其他形式的语句

Question

我目前有一个很大的表格，它有一个选择区域，最后根据您的答案会给您一个链接。

这似乎很有效，直到您回到第2步并选择一个不同的主题，然后该按钮不会重置，而是保持不变。任何人都可以弄清楚为什么会这样吗？

$(function() {

  $('.age').on('change', function() {
    //Age 8-10
    if ($(this).val() === "8" || $(this).val() === "9" || $(this).val() === "10") {
      $("#subject8-10").show();
      $("#subject-overall").hide();

      //Subject 8-10
      $('.subject8-10').on('change', function() {
        //Subject Overall
        if ($(this).val() === "subject-fill") {
          $("#location-overall").show();
          $("#locations-ge-ss-8").hide();

          //General English
        } else if ($(this).val() === "general-english") {
          //Locations
          $("#locations-ge-ss-8").show();
          $("#location-overall").hide();

          $('.locations-ge-ss-8').on('change', function() {
            if ($(this).val() === "location-fill") {
              $("#button-overall").show()
              $("#sbcox-ge").hide();
              $("#sbcox-ss").hide();
            } else if ($(this).val() === "sbc-oxford") {
              $("#sbcox-ge").show();
              $("#sbcox-ss").hide();
              $("#button-overall").hide()
            } else {
              $("#sbcox-ge").hide();
              $("#sbcox-ss").hide();
              $("#button-overall").show()
            }
          });

          //Summer Study
        } else if ($(this).val() === "summer-study") {
          //Locations
          $("#locations-ge-ss-8").show();
          $("#location-overall").hide();

          $('.locations-ge-ss-8').on('change', function() {
            if ($(this).val() === "location-fill") {
              $("#button-overall").show()
              $("#sbcox-ss").hide();
              $("#sbcox-ge").hide();
            } else if ($(this).val() === "sbc-oxford") {
              $("#sbcox-ss").show();
              $("#sbcox-ge").hide();
              $("#button-overall").hide()
            } else {
              $("#sbcox-ss").hide();
              $("#sbcox-ge").hide();
              $("#button-overall").show()
            }
          });
        } else {
          $("#location-overall").show();
          $("#button-overall").show()
        }
      });

      //If 11 show the Subject 11 Field
    } else if ($(this).val() === "11") {
      $("#subject11").show();
      $("#subject8-10").hide();
      $("#subject-overall").hide();
      $("#location-overall").show();
    } else {
      $("#subject8-10").hide();
      $("#subject-overall").show();
    }
  });

});

.inner-modal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="decider-form">
  <div class="container">
    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-12">
          <select name="age" class="age">
            <option value="age-fill">1. Age</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
          </select>
        </div>
        <!--End Columns-->

        <!--Overall-->
        <div class="col-lg-3 col-md-3 col-sm-12" id="subject-overall">
          <select name="subject">
            <option value="subject-fill">2. Subject</option>
          </select>
        </div>

        <!--Subjects-->
        <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="subject8-10">
          <select name="subject" class="subject8-10">
            <option value="subject-fill">2. Subject</option>
            <option value="general-english">
              General English
            </option>
            <option value="summer-study">
              Summer Study
            </option>
          </select>
        </div>


        <!--Overall-->
        <div class="col-lg-3 col-md-3 col-sm-12" id="location-overall">
          <select name="location">
            <option value="location-fill">3. Location</option>
          </select>
        </div>

        <!--Locations-->
        <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="locations-ge-ss-8">
          <select name="location" class="locations-ge-ss-8">
            <option value="location-fill">3. Location</option>
            <option value="sbc-oxford">
              SBC Oxford
            </option>
          </select>
        </div>

        <!--Overall-->
        <div class="col-lg-3 col-md-3 col-sm-12" id="button-overall">
          <div class="call-to-action disabled">
            <a class="call-action" href="#">See Your Course</a>
          </div>
        </div>

        <!--Buttons-->
        <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge">
          <div class="call-to-action">
            <a class="call-action" href="link" target="_blank">See General English</a>
          </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss">
          <div class="call-to-action">
            <a class="call-action" href="link" target="_blank">See Summer Study</a>
          </div>
        </div>

    </div>
    <!--End Row-->
  </div>
  <!--End Container-->
</div>
<!--End Decider Form-->

Answer 1

您无需嵌套onchange并使用切换。

类似：

// Ages
$('.age').on('change', function() {
    var s8_10 = $(this).val() === "8" || $(this).val() === "9" || $(this).val() === "10"

    $("#subject8-10").toggle(s8_10);
    $("#subject-overall").toggle(!s8_10);
});

// Subject 8-10
$('.subject8-10').on('change', function() {
    var fill = $(this).val() === "subject-fill";
    var ge_ss = $(this).val() === "general-english" || $(this).val() === "summer-study";

    $("#location-overall").toggle(fill);
    $("#locations-ge-ss-8").toggle(ge_ss);
})

// Locations Genearal English & Summer Study Ages 8-10
$('.locations-ge-ss-8').on('change', function() {
    var fill = $(this).val() === "location-fill";
    var sbco = $(this).val() === "sbc-oxford";

    $("#button-overall").toggle(fill && !sbco);
    $("#sbcox-ss").toggle(sbco);
    $("#sbcox-ge").toggle(!sbco);
});