javascript - 从上下文中删除时，jQuery 函数将不会运行

Question

此代码具有我想要的行为，但我希望该行为也在页面最初加载时发生:(jsfiddle:https://jsfiddle.net/1px1t57s/)

$(document).ready(function(){
    $('#id_repeat_type').on('change', function() {
      if (this.value == 'NR')
      {
        $("#repeat-options").hide();
      }
      else
      {
        $("#repeat-options").show();
      }
    });
});

我的第一个想法是使用“更改加载”或“更改就绪”而不仅仅是“更改”，但这并没有改变行为(可能是因为该函数已经包装在 $(document).ready 中？)

我的下一个想法是取出该函数并在更改时单独运行它，但是当我删除该函数时，它破坏了现有功能:https://jsfiddle.net/1px1t57s/1/

我错过了什么？

Answer 1

首先调用.change()来调用change-handler

请注意，带有 Boolean 的 toggle 可用于显示/隐藏元素

$(document).ready(function() {
  function toggle_options() {
    $("#repeat-options").toggle(this.value != 'NR');
  };
  $('#id_repeat_type').on('change', toggle_options).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="/tasks/19" method="post">
  <input type="submit" value="Save" />
  <br>

  <label for="id_task_name">Task name:</label>
  <input style="width: 100%" id="id_task_name" maxlength="400" name="task_name" type="text" value="sample task" />

  <label for="id_repeat_type">Repeat type:</label>
  <select id="id_repeat_type" name="repeat_type">
    <option value="NR" selected="selected">No Repeat</option>
    <option value="IA">Repeat After X Days</option>
    <option value="IE">Repeat Every X Days</option>
  </select>

  <div id="repeat-options">
    <label for="id_repeat_days">Days between instances:</label>
    <input id="id_repeat_days" name="repeat_days" type="number" />
  </div>

  <br>
  <input type="submit" value="Save" />
</form>