JavaScript else if语句控制Bootstrap模态框失效问题求助

问题排查方向 #

• 首先检查浏览器控制台是否存在JS语法报错：你使用的服务端模板语法（如Blade/Twig）如果awaitingapproval()返回空或者渲染异常，会直接导致JS逻辑执行中断，注释else if分支时没有触发异常所以能正常执行，保留后渲染出非法JS语法就会全逻辑失效。
• 避免重复调用状态判断函数：多次调用awaitingapproval()可能存在副作用，比如第一次调用返回1，后续调用返回其他值，导致两个分支都不命中，直接进入else分支隐藏所有模态框。
• 校验返回值类型：如果服务端渲染出来的返回值是字符串类型（比如"1"/"2"）或者带多余空格、换行，会导致等于判断失效。

修复后的代码 #

提前把状态值存为变量，同时加控制台打印方便调试：

<!--Awaiting Verification Modal -->
<div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body p-5" align="center">
         <h3>Awaiting Profile Verification and Confirmation.</h3>
         <h5>Check your email for more details</h5>
      </div>
    </div>
  </div>
</div>

<!--Verify Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="verifyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body p-5" align="center">
         <h3>Your withdrawal Verification has been confirmed.</h3>
         <button class="btn btn-success">Proceed</button>
      </div>
    </div>
  </div>
</div>

<script>
   $(window).on('load', function() {
    // 提前把状态值存为变量，只调用一次函数
    const approvalStatus = {{ awaitingapproval() }};
    // 打印值到控制台，方便排查返回是否符合预期
    console.log('审批状态值：', approvalStatus, typeof approvalStatus);
     
    if(approvalStatus === 1) {
      $('#awaitModal').modal('show');
    } else if(approvalStatus === 2) {
      $('#verifyModal').modal('show');
    } else {
      $('#awaitModal').modal('hide');
      $('#verifyModal').modal('hide');
    }
});
</script>

额外注意事项 #

如果是模板渲染时awaitingapproval()返回字符串，把判断条件改成approvalStatus === '1'或者用弱等于==即可。

内容的提问来源于stack exchange，提问作者David Orizu