Question

在＆＃34;创建＆＃34;页面，当其中一个被选中或取消选中时，我使用复选框时会发生很多事情...

$('.option').on('change', function() {
//lots of stuff
});

我在＆＃34;编辑＆＃34;上有这些复选框。页面也是如此，所以当＆＃34;编辑＆＃34;页面加载，它正确设置所有复选框（选中或取消选中），但也有一些数学计算在onchange上完成，我需要在页面加载时完成。换句话说，为了在首次打开编辑页面时显示的数字是正确的，我需要更改＆＃34;更改＆＃34;上面的函数在页面加载时运行。

可行吗？基本上希望它在页面加载时运行，然后在有实际的＆＃34;更改时再次运行。（按照原定的意图）。

Answer 1

我会将逻辑分开：

$('.option').on('change', function() {
   doLotOfStuff();
});

function doLotOfStuff() {
  // do your stuff here
}

$(document).ready(function loadPage() {
  doLotOfStuff();
});

这甚至允许extend你的逻辑（如果需要），并通过在每个案例上传递不同的参数来重复使用它（如果需要的话，再次）。

Answer 2

将//lots of stuff包裹在一个功能中。在活动ready上，使用one()方法仅拨打//lots of stuff一次。在这个片段中，我创建了一个名为process()的函数，当DOM为ready时，它只调用一次，并且只要复选框位于change下，就会调用它。

<强>段

＆＃13;

/* When document is ready call on...
|...process() only once.
*/
$(document).one('ready', process);

// Any change on any checkbox call process()
$('.chx').on('change', process);

function process(e) {
  var total = 0;
  $(".chx:checked").each(function() {
    total += parseInt($(this).val(), 10);
  });
  $('#total').val(total);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset>
  <label>1
    <input class='chx' type='checkbox' value='1'>
  </label>
  <label>2
    <input class='chx' type='checkbox' value='2'>
  </label>
  <label>3
    <input class='chx' type='checkbox' value='3'>
  </label>
  <label>4
    <input class='chx' type='checkbox' value='4' checked>
  </label>
  <label>5
    <input class='chx' type='checkbox' value='5'>
  </label>
  <label>6
    <input class='chx' type='checkbox' value='6'>
  </label>
  <label>7
    <input class='chx' type='checkbox' value='7' checked>
  </label>
  <label>8
    <input class='chx' type='checkbox' value='8'>
  </label>
  <label>9
    <input class='chx' type='checkbox' value='9'>
  </label>
  <label>10
    <input class='chx' type='checkbox' value='10' checked>
  </label>
</fieldset>
<label for='total'>Total:
  <output id='total'></output>
</label>

＆＃13;

如何在页面加载时运行更改功能？

2 个答案: