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=作为函数调用，则Google Chrome会显示：

未捕获的ReferenceError：未定义initToggle

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

Answer 1

您收到错误，因为该函数已在＆＃34; ready＆＃34;中声明/作用域。打回来。为了解决这个问题，我会移动逻辑并让javascript在初始化时决定：

翡翠部分

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}); }); });

玉方使用html data attribute来存储信息，而js方则在文档准备就绪时使用它。

初始化On-Off切换元素

1 个答案: