如何根据数据库值在页面加载时立即显示对应元素

我开发的页面里有两个元素，需要根据数据库返回的值控制显示：当值为picked时显示process元素（id为picked的<tr>），值为send时显示receipt number元素（id为send的<tr>）。

目前写的JS代码只有在修改输入框文本后才会触发显隐逻辑，页面加载完成时不会自动生效。现有代码如下：

现有JavaScript代码 #

$(function(){
  $('input:text').change(function(){
    if($(this).val() == "picked") {
      $("#picked").show();
      $("#send").hide();
    }
    else {
      $("#picked").hide();
      $("#send").show();
    }
  });
});

现有HTML代码 #

<tr>
  <th>Metode</th>
  <td>
    <input class="metode" type="text" id="metode" value="{{ $p->methode }}" style="border: none;">
  </td>
</tr>
<tr id="send" style="display: none;">
  <th>Receipt</th>
  <td>{{ $p->receipt }}</td>
</tr>
<tr id="picked" style="display: none;">
  <th>Process</th>
  <td>{{ $p->process }}</td>
</tr>

解决方法 #

方法一：抽离逻辑为独立函数（推荐，利于维护） #

把判断显隐的逻辑单独封装成函数，页面加载时直接调用一次，同时保留输入框的change事件监听：

$(function(){
  // 封装显隐控制逻辑
  function toggleElements(inputValue) {
    if(inputValue === "picked") {
      $("#picked").show();
      $("#send").hide();
    } else {
      $("#picked").hide();
      $("#send").show();
    }
  }

  // 页面加载完成后，立即根据输入框初始值执行一次
  toggleElements($('#metode').val());

  // 监听输入框变化事件，触发逻辑
  $('input:text').change(function(){
    toggleElements($(this).val());
  });
});

方法二：手动触发change事件（简洁写法） #

直接在绑定change事件后，调用trigger('change')手动触发一次事件，让页面加载时执行逻辑：

$(function(){
  $('input:text').change(function(){
    if($(this).val() == "picked") {
      $("#picked").show();
      $("#send").hide();
    }
    else {
      $("#picked").hide();
      $("#send").show();
    }
  }).trigger('change'); // 页面加载时手动触发change事件
});

两种方法都能实现页面加载时立即根据数据库返回值显示对应元素，可根据代码维护需求选择。

内容的提问来源于stack exchange，提问作者choco mufflin