如何将命名空间变量传递给点击函数参数变量？ jQuery

Question

所以我在这里找到了一个awesome solution 来解决需要在 jQuery 中使用全局变量的问题。我到处说命名空间，最初我打算使用全局变量。

但是我无法通过简单点击函数上的参数发送我的命名空间变量。

我想这样做是因为我有这些变量需要保存并用于创建模态窗口以及让应用知道哪些动态创建的按钮控制着哪些模态。

下面是我首先创建变量的命名空间对象的示例 我的 jQuery 命名空间对象：

$.reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
}; 

$(document).ready(function () {
    ...

当您浏览应用程序时，这些命名空间变量的值会在您单击此按钮时设置（从 HTML 中获取数据） 在我的 roleBtnClicked 函数上设置了变量

function roleBtnClicked(event){

    $.reg.masterRole  = $(this).html();            /* Get role name: Actor */
    $.reg.role_ID     = $(this).attr('role');      /* Get role-1 */
    $.reg.rowName     = $(this).attr('row');       /* Get row-role-1 */
    $.reg.blueBtn     = $(this).attr('blue');      /* Get blue-btn-1 */

现在会弹出一个模式窗口，在单击一些复选框并将数据推送到数组后，当您单击完成按钮（如下）时，所有变量都需要再次保存到命名空间 vars 中。

我的完成按钮单击函数，我试图通过 param vars 传递我的命名空间变量

$(".doneButton").click(
    {
        param1: $.reg.masterRole,
        param2: $.reg.role_ID,
        param3: $.reg.rowName,
        param4: $.reg.ary_Check_Role
    },
    doneBtnClicked);

function doneBtnClicked(event){
    alert('$.reg.roleName    = '+$.reg.roleName);
    alert('event.data.param1 = '+event.data.param1);

    masterRole= event.data.param1;
    role_ID  = event.data.param2;
    rowName  = event.data.param3;
    ary_Check_Role = event.data.param4;

---

注意上面点击函数中的2个警报，第一个将显示正确的值，但是第二个不显示任何内容。让数组通过也有问题。

所以问题：我应该这样做吗？如何正确地将 Array 传递到 jQuery 命名空间中，然后将其传递到 click 函数参数中？

Answer 1

首先，您应该避免将东西放入 jQuery 对象中。为此使用闭包。

第二：您应该使用 HTML data-... 属性和 jQuery data() 将自定义属性附加到 HTML 元素。避免使用非标准属性。

第三：您可以为事件处理程序使用单独的命名函数定义，但是当您实际上为代码中的不同元素重用这些函数时，它最有意义（您似乎没有这样做那）。例如，使用直接传递给.click() 的匿名函数会产生更易于理解的代码。

// use this shorthand instead of $(document).ready(function () { ... });
$(function () {

  // variable reg will be available to all functions 
  // defined within this outer function. This is called a closure.
  var reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
  };

  $(".roleButton").click(function (event) {
    // modify state
    reg.masterRole  = $(this).html();            /* Get role name: Actor */
    reg.role_ID     = $(this).data('role');      /* Get role-1 */
    reg.rowName     = $(this).data('row');       /* Get row-role-1 */
    reg.blueBtn     = $(this).data('blue');      /* Get blue-btn-1 */

    // note that this requires markup like this:
    // <button data-role="foo" data-row="bar" data-blue="baz">

    // ...
  });

  $(".doneButton").click(function (event) {
    // debug output
    alert(JSON.stringify(reg, 2, 2));
  });

});

使用多个 $(function () { ... }); 块来分隔应该分开的东西。

不要忘记始终为您声明的每个变量使用var。没有var 声明的变量将是全局变量——你不需要全局变量。