javascript - 使用 javascript 在 HTML 选择的嵌入 DIV 中显示 DIV

Question

我正在尝试设置一个页面，人们可以通过在网络表单中选择“开始”来触发调查问卷 - 它会弹出第一个问题的 DIV。

当他们回答每个问题(是/否选择)时，它要么打开一个特定于该问题的 DIV，其中显示“不 - 离开，因为 XXXX”，要么在新的 DIV 中提出下一个问题...这会重复大约 8次。

到目前为止，我可以显示第一个问题，但当我选择问题 1 的答案时它不会执行任何操作 - 它应该使 Q2 DIV 出现或提供上下文 DIV 来说明为什么他们无法继续。

我在this jsfiddle link中有一个(非常)精简的演示

HTML 代码是:

  <div class="container">
      <form id="GeneralEnquiryForm" class="row justify-content-center no-gutters col-12" name="GeneralEnquiry" method="post" action="https://somesite.com/forms/accessrequest/request_submitted.php" enctype="multipart/form-data" data-toggle="validator">
        <div class="form-group row justify-content-center col-sm-12 col-md-12 col-lg-10 col-xl-10">
          <div id="GeneralEnquiryHeading">
                    <h2>Request Form</h2>
                </div>
          </div>

        <!-- ############################ -->
        <!-- # Main Menu Selection Tree # -->
        <!-- ############################ -->

        <div class="form-group row justify-content-center col-sm-12 col-md-12 col-lg-10 col-xl-10">
                    <div class="form-group col-12">
                        <label for="requestSelect">This checklist MUST be complete to submit this form. *</label>
                        <select class="form-control" name="requestSelect" id="requestSelect" required>
                            <option value="" selected disabled="disabled">Please select the check to begin.</option>
                            <option title="Option 1" value="HealthCheck">Commence Checklist</option>
                        </select>
                    </div>

                    <!-- ############################# -->
                    <!-- #    Health Check                   # -->
                    <!-- ############################# -->
                    <div class="form-group col-12 clearAll HealthCheck fade show" role="dialog">
                        <div>
                            <h6>Request Form</h6>
                            <h2>CHECK LIST</h2>
                        </div>

            <label for="HealthCheck1">Have you returned from overseas travel in the past 14 days? *</label>
                            <select class="form-control" name="HealthCheck1" id="HealthCheck1" required>
                                <option value="" selected disabled="disabled"> Please select Yes or No </option>
                                <option title="HealthCheck1Yes" value="HealthCheck1Yes">Yes</option>
                                <option title="HealthCheck1No" value="HealthCheck1No">No</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group col-12 clearAll HealthCheck1No alert alert-info fade show" role="alert">
                        <label for="HealthCheck2">Have you returned from interstate travel in the past 14 days? *</label>
                        <select class="form-control" name="HealthCheck2" id="HealthCheck2" required>
                            <option value="" selected disabled="disabled"> Please select Yes or No </option>
                            <option title="HealthCheck2Yes" value="HealthCheck2Yes">Yes</option>
                            <option title="HealthCheck2No" value="HealthCheck2No">No</option>
                        </select>
                    </div>

                    <div class="form-group col-12 clearAll HealthCheck2No alert alert-info fade show" role="alert">
                        <label for="HealthCheck3">Are you currently required to self-isolate? *</label>
                        <select class="form-control" name="HealthCheck3" id="HealthCheck3" required>
                            <option value="" selected disabled="disabled"> Please select Yes or No </option>
                            <option title="HealthCheck3Yes" value="HealthCheck3Yes">Yes</option>
                            <option title="HealthCheck3No" value="HealthCheck3No">No</option>
                        </select>
                    </div>


                    <!-- ############################ -->
                    <!-- # Health Check Pop-Up Help # -->
                    <!-- ############################ -->

                    <div class="form-group col-12 clearAll HealthCheck1Yes alert alert-warning fade show" role="alert">
                        <h5>Do <strong>NoT</strong> attend campus!</h5>
                        <div class="row col-12 align-items-center">
                            <div class="termsIcon col-2 .col-sm-2 col-md-2 col-lg-1 col-xl-1">
                                <img src="../images/warning_small.png" class="rounded float-left" alt="">
                            </div>
                            <div class="col">
                                <h6><strong>If you have returned from overseas travel in the past 14 days, you should be self-isolating.</strong></h6></br>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-12 clearAll HealthCheck2Yes alert alert-warning fade show" role="alert">
                        <h5>Do <strong>NoT</strong> attend campus!</h5>
                        <div class="row col-12 align-items-center">
                            <div class="termsIcon col-2 .col-sm-2 col-md-2 col-lg-1 col-xl-1">
                                <img src="../images/warning_small.png" class="rounded float-left" alt="">
                            </div>
                            <div class="col">
                                <h6><strong>If you have returned from interstate travel in the past 14 days, you should be self-isolating</strong></h6></br>
                            </div>
                        </div>
                        </br></br>
                    </div>

        <!-- ############################# -->
        <!-- # Individual Pop-Up Modules # -->
        <!-- ############################# -->

          <hr class="separator col-12">
          * Please fill in ALL of the above fields or the form will not submit.
          <hr class="separator col-12">
            <div id="new-div"></div>

          <div class="form-group justify-content-right col-sm-12 col-md-12 col-lg-10 col-xl-10">
            <button type="submit" value="Submit" id="submit" class="btn btn-primary float-right" onclick="return checkform()">Submit Request</button>
          </div>
      </form>


            </div>
    </div>

Javascript

    <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>


    <script>
      $(function () {
        $("#requestSelect").change(function() {
          var val = $(this).val();
          if(val === "HealthCheck") {
            $(".clearAll").hide();
            $(".HealthCheck").show();
          }
        });
      });
    </script>

    <script>
                $(function () {
                $("#HealthCheck1").change(function() {
                    var val = $(this).val();
                    if(val === "HealthCheck1Yes") {
                        $(".HealthCheck1Yes").show();
                    }
                    else if(val === "HealthCheck1No") {
                        $(".HealthCheck1No").show();
                    }
                }
            });
    </script> 

[编辑 - 修复 JSFiddle]

Answer 1

您错过了最后关闭函数 }) :

$("#HealthCheck1").change(function() {
    var val = $(this).val();
    if(val === "HealthCheck1Yes") {
        $(".HealthCheck1Yes").show();
    }
    else if(val === "HealthCheck1No") {
        $(".HealthCheck1No").show();
    }
});

Working jsfiddle

还有一些其他建议可供您考虑:

1. 使用自闭合 HTML 标记的正确语法。使用<br />而不是</br> .

2. 使用正确的缩进(适用于所有文档)可以帮助您更快地找到未关闭的函数和其他错误。

3. 将您的 javascript 放入适当的文件中，然后将其包含在 <script src="myscripts.js"></script> 中。这将允许您的代码编辑器(如 intellij)检测简单的结束标记/函数问题。