初始化 On-Off 切换元素答案

【问题标题】：Initialize On-Off toggle elements初始化 On-Off 切换元素
【发布时间】：2016-07-31 13:07:36
【问题描述】：

我有一个帐户表，我希望能够使用 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=as 函数调用，谷歌浏览器会显示：

未捕获的 ReferenceError：未定义 initToggle

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

【问题讨论】：

标签： javascript jquery pug

【解决方案1】：

您会收到错误，因为该函数是在“就绪”回调中声明/限定的。为了解决这个问题，我会移动逻辑并让 javascript 决定 when 初始化事物：

翡翠部分

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端在文档准备好时使用。

【讨论】：