javascript - 显示/隐藏 div Javascript 错误

Question

我需要有关此 fiddle 的帮助。工作流程:

1. 选择公民身份
2. 如果选择值 = 1，则显示带有 2 个单选按钮的隐藏 div。
3. 如果答案是肯定的，则显示带有 2 个单选按钮的第二个隐藏的 div。
4. 如果答案是肯定的，显示带有文本输入字段的第三个隐藏 div。
5. 输入完成后，显示隐藏的下一步按钮。
6. 如果选择值为 0，则回答否，第二个回答否，显示隐藏的下一步按钮。

该代码适用于我的本地保存，直到最后一个单选按钮，但是当我在那里选择否时，“下一步”按钮不显示。

你能帮我修复一下代码吗？

function showDiv(elem) {
  switch (elem.value) {
    case '1':
      document.getElementById('questionHIDDEN').style.display = 'block';
      document.getElementById('employedHIDDEN').style.display = 'none';
      document.getElementById('numberinputHIDDEN').style.display = 'none';
      document.getElementById('stepsHIDDEN').style.display = 'none';
      break;
    case '0':
      document.getElementById('stepsHIDDEN').style.display = 'block';
      break;
  }
};

$(document).ready(function() {

  $('input[name="employed"]').click(function() {
    if ($(this).attr("value") == "no") {
      $("#stepsHIDDEN").show();
      $("#employedHIDDEN").hide();
      $("#numberinputHIDDEN").hide();
    } else if ($(this).attr("value") == "yes") {
      $("#employedHIDDEN").show();
      $("#stepsHIDDEN").hide();
    } else {
      $("#stepsHIDDEN").hide();
    }
  });

  $('input[name="epworking"]').click(function() {
    if ($(this).attr("value") == "no") {
      $("#stepsHIDDEN").show();
      $("#numberinputHIDDEN").hide();
    } else
      $("#numberinputHIDDEN").show();
    $("#stepsHIDDEN").hide();
  });

  $('input[name=fname]').keyup(function() {
    if ($(this).val().length == 6) {
      $('#stepsHIDDEN').show();
    } else
      $('#stepsHIDDEN').hide();
  });

});

#questionHIDDEN,
#employedHIDDEN,
#numberinputHIDDEN,
#stepsHIDDEN {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
  <div id="content">
    <div id="text">
      <h4>2/3 Civil Status</h4> What is your civil status?
      <br>
      <br>
      <select name="status" id="soflow2" onchange="showDiv(this)">
        <option>Select</option>
        <option value="0">Single</option>
        <option value="1">Married</option>
        <option value="1">Registered Legal Partnership</option>
        <option value="1">Remarried</option>
        <option value="0">Legally Separated</option>
        <option value="0">Divorced</option>
        <option value="0">Widowed</option>
        <option value="1">Informal Partnership</option>
      </select>
      <div id="spouse">
        <table id="questionHIDDEN">
          <tr>
            <td>
              Is your spouse/legal partner employed?
            </td>
          </tr>

          <tr>
            <td class="left">
              <form>
                <span class="radiobutton"><input type="radio" name="employed" value="yes"> Yes </span>
                <span class="radiobutton"><input type="radio" name="employed" value="no"> No </span>
              </form>
            </td>
          </tr>
        </table>

        <table id="employedHIDDEN">
          <tr>
            <td>
              Is your spouse/legal partner working in our institution?
            </td>
          </tr>

          <tr>
            <td class="left">
              <form>
                <span class="radiobutton"><input type="radio" name="epworking" value="yes"> Yes </span>
                <span class="radiobutton"><input type="radio" name="epworking" value="no"> No </span>
              </form>
            </td>
          </tr>
        </table>

        <table id="numberinputHIDDEN">
          <tr>
            <td>
              <span>His/her personal number: <input class="personnelnumber" type="text" name="fname"> <i class="fa fa-info-circle tooltip" aria-hidden="true"><span class="tooltiptext">A 6 digit number, you can find it on an offical document.</span>
              </i>
              </span>
              <td>
          </tr>
        </table>
      </div>
    </div>
    <div id="stepsHIDDEN">
      <button onclick="window.location='03Children.html'" class="nextstep">Next</button>
    </div>
  </div>

</main>

https://jsfiddle.net/pLv4uams/

Answer 1

问题出在您的 $('input[name="epworking"]') - click 事件 上。在 else 部分，您没有用 {} 括起来，因此 else 只占用一行执行。 $("#stepsHIDDEN").hide(); 将在该 event 上以任何成本执行。所以即使你展示了它，后面的部分也在隐藏它。下面是修复。

$('input[name="epworking"]').click(function() {
   if ($(this).attr("value") == "no") {
     $("#stepsHIDDEN").show();
     $("#numberinputHIDDEN").hide();
   } else {
     $("#numberinputHIDDEN").show();
     $("#stepsHIDDEN").hide();
   }
});

DEMO