javascript - 初始化开关切换元素

Question

我有一个帐户表，我希望能够使用 JQuery 开关打开/关闭它们。一开始，我需要初始化每个帐户的切换(将一个帐户设置为打开或关闭)。我想在页面加载时执行此操作。

我的 Jade 模板部分:

tbody
  each account in accounts
    tr
      td
        .col-sm-7.control-label
          div(class='toggle toggle-success', onload='initToggle(#{account.IsActive}, this)')
        | #{account.Id}
      td #{account.Email}

我的初始化切换函数:

script.
  jQuery(document).ready(function () {
    function initToggle(isActive, element)
    {
      if (isActive)
        element.toggles({'on': true});
      else
        element.toggles({'on': false});
    }

我的问题:

如果我使用 onload= 进行函数调用，我根本不会收到错误。如果我使用 onclick= 作为函数调用，谷歌浏览器会显示:

Uncaught ReferenceError: initToggle is not defined

如何正确初始化我的开/关切换？

Answer 1

您收到错误是因为该函数是在“就绪”回调内声明/作用域的。为了解决这个问题，我将移动逻辑并让 javascript 决定何时初始化事物:

Jade 部分

div(class='toggle toggle-success', data-is-active='#{account.IsActive}')

Javascript部分

jQuery(document).ready(function ($) {
  $(".toggle").each(function () {
    var $this = $(this);
    var isActive = $this.data("isActive") === "true";
    // or .data("is-active") for jQuery 2, see https://api.jquery.com/data/
    $this.toggles({'on': isActive});
  });
});

Jade 方使用html data attribute存储信息，js 端在文档准备好时使用它。