显示/隐藏div Javascript错误

时间:2016-05-02 08:09:42

标签: javascript jquery html css

我需要帮助这个小提琴。 工作流程:

  1. 选择公民身份
  2. 如果选择值= 1,则显示带有2个单选按钮的隐藏div。
  3. 如果答案为是,请显示带有2个单选按钮的第二个隐藏div。
  4. 如果答案为是,请显示带有文本输入字段的第3个隐藏div。
  5. 填写输入后,显示隐藏的下一步按钮。
  6. 如果选择值为0,则回答否,第二个回答否,显示隐藏的下一步按钮。
  7. 代码在我的本地保存中适用于最后一个单选按钮,但是当我在那里选择no时,Next按钮不会显示。

    您可以帮我修复我的代码吗?

    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/

1 个答案:

答案 0 :(得分:1)

问题在于您的$('input[name="epworking"]') - click event。在else部分中,您没有用{}括起行,因此else只占用了一行执行。 $("#stepsHIDDEN").hide();event执行$('input[name="epworking"]').click(function() { if ($(this).attr("value") == "no") { $("#stepsHIDDEN").show(); $("#numberinputHIDDEN").hide(); } else { $("#numberinputHIDDEN").show(); $("#stepsHIDDEN").hide(); } }); 。因此,即使你展示它,后面的部分也隐藏了它。以下是修复。

{{1}}

<强> DEMO