如何在JavaScript中的元素数组中添加带有参数的事件处理程序？ [英] How to Add Event Handler with Arguments to an Array of Elements in Javascript?

问题描述

我有一个三步骤的过程，完全依赖于JavaScript和Ajax来加载数据，并将流程从一步到另一步动画化。为了进一步使问题复杂化，步骤之间的过渡（向前和向后）是动画:-(当用户通过进程锚点的进度显示当前步骤和以前的步骤时，如果他们点击上一步，则将它们带回上一步。

现在，整个过程（前进和后退）都可以正常工作，如果您从步骤1开始，但如果直接跳到第3步，那么步骤1和步骤2的锚点也执行与步骤3相同的操作。

这是循环遍历当前步骤的所有步骤的代码部分用户将依次显示每个锚点，并为点击事件分配适当的功能：

  for（var i = 0; i< profile.current + 1; i ++）{
 if（$（'step_anchor_'+ i）.innerHTML.empty（））{
 var action = profile.steps [i] .action; 
 var dao_id = profile.steps [i] .dao_id; 
 
 $（' step_anchor_'+ i）.innerHTML = profile.steps [i] .anchor; 
 $（'step_anchor_'+ i）.observe（'click'，function（）{
 pm.loadData（action，dao_id，true）; 
}）; 
 
 Effect.Appear（'step_anchor_'+ i，{
 duration：1，
 delay：（down_delay ++）
}）; 
} 
} 
  

我知道问题在于行动方式并且dao_id参数正在传入中。我也尝试传递profile.steps [i] .action和profile.steps [i] .dao_id，但在这种情况下，配置文件和我或至少我都是范围。

我如何做到这一点，以便我可以为每个步骤正确分配action和dao_id的参数？ （如果有任何差异，我们使用Prototype和Scriptaculous）

解决方案

您的关闭范围链导致您的问题。通过内联声明处理函数，您已经创建了一个闭包。显然，你这样做是为了利用这个循环。

然而，由于你创建了一个关闭，所以你正在使用关闭范围规则。这些规则规定，只要闭包存在，父函数中的局部变量就保持活动状态。

您尝试传递，然后使用action和 dao_id到你的关闭，但你在这里传递引用，而不是值。所以当你的闭包（处理程序）被调用时，它们使用上次赋值引用的值。在您的情况下，步骤3处理程序。

关闭范围界定规则令人困惑，但您也可能会因为action和dao_id仍然是即使循环块执行完毕，它仍然存在。那么在JavaScript中没有这样的块范围。一旦你声明一个变量，它就可以直到函数结束，直到被删除。无论哪一个。

所有这一切，你需要打破范围链。这样做有两种方法：

尝试这样：

  for（var i = 0; i< profile.current + 1; i ++）{
 if（$（'step_anchor_'+ i）.innerHTML.empty（））{
 var action = profile。步骤[I] .action; 
 var dao_id = profile.steps [i] .dao_id; 
 
 $（'step_anchor_'+ i）.innerHTML = profile.steps [i] .anchor; 
 $（'step_anchor_'+ i）.observe（'click'，function（a，b）{
 return function（）{pm.loadData（a，b，true）}; 
}（action，dao_id））; 
 
 Effect.Appear（'step_anchor_'+ i，{
 duration：1，
 delay：（down_delay ++）
}）; 
} 
} 
  

或者这个：

  function createHandler（action，dao_id）{
 return function（）{pm.loadData（action，dao_id，true）;}; 
} 
 
 / * snip  - 里面一些其他函数* / 
 for（var i = 0; i< profile.current + 1; i ++）{
 if（$（'step_anchor_'+ i）.innerHTML.empty（））{
 var action = profile.steps [i] .action; 
 var dao_id = profile.steps [i] .dao_id; 
 
 $（'step_anchor_'+ i）.innerHTML = profile.steps [i] .anchor; 
 $（'step_anchor_'+ i）.observe（'click'，createHandler（action，dao_id））; 
 Effect.Appear（'step_anchor_'+ i，{
 duration：1，
 delay：（down_delay ++）
}）; 
} 
} 
  

I have a three-step process that is entirely reliant upon JavaScript and Ajax to load data and animate the process from one step to the next. To further complicate matters, the transition (forward and backward) between steps is animated :-(. As user's progress through the process anchor's appear showing the current step and previous steps. If they click on a previous step, then it takes them back to the previous step.

Right now, the entire process (forward and backward) works correctly, if you begin at step 1, but if you jump straight to step 3 then the anchors for step 1 and step 2 also perform the same action as step 3.

This is the portion of the code that loops through all of the steps up to the current step that the user would be on and displays each anchor in turn and assigns the appropriate function to the click event:

for (var i = 0; i < profile.current + 1; i++) {
    if ($('step_anchor_' + i).innerHTML.empty()) {
        var action = profile.steps[i].action;
        var dao_id = profile.steps[i].dao_id;

        $('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
        $('step_anchor_' + i).observe('click', function(){
            pm.loadData(action, dao_id, true);
        });

        Effect.Appear('step_anchor_' + i, {
            duration: 1,
            delay: (down_delay++)
        });
    }
}

I know that problem lies in the way that the action and dao_id parameters are being passed in. I've also tried passing profile.steps[i].action and profile.steps[i].dao_id but in that case both profile and i or at least i are out scope.

How do I make it so that I can assign the parameters for action and dao_id correctly for each step? (If it makes any difference we are using Prototype and Scriptaculous)

解决方案

Your closure scope chain is causing your problems. By declaring the handler function inline, you've created a closure. Obviously you did this to take advantage of the loop.

However, since you have created a closure, you're playing by closure scoping rules. Those rules state that the local variables within the parent function remain active and available as long as the closure exists.

You are trying to pass and then use "action" and "dao_id" to your closure, but you are passing references here, not values. So when your closures (handlers) are called they use the value that the reference was last assigned. In your case, the Step 3 handler.

Closure scoping rules are confusing enough, but you may also be confused by the fact that "action" and "dao_id" are still alive even though the loop block has finished executing. Well, in JavaScript there is no such thing as block scope. Once you declare a variable it is available until the end of the function or until is it deleted. Whichever comes first.

All that said, you need to break the scope chain. Here are two ways to do that:

Try this:

for (var i = 0; i < profile.current + 1; i++) {
    if ($('step_anchor_' + i).innerHTML.empty()) {
        var action = profile.steps[i].action;
        var dao_id = profile.steps[i].dao_id;

        $('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
        $('step_anchor_' + i).observe('click', function(a, b){
                return function(){pm.loadData(a, b, true)};
        }(action, dao_id));

        Effect.Appear('step_anchor_' + i, {
                duration: 1,
                delay: (down_delay++)
        });
    }
}

Or this:

function createHandler(action, dao_id) {
    return function(){pm.loadData(action, dao_id, true);};
} 

/* snip - inside some other function */
for (var i = 0; i < profile.current + 1; i++) {
    if ($('step_anchor_' + i).innerHTML.empty()) {
        var action = profile.steps[i].action;
        var dao_id = profile.steps[i].dao_id;

        $('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
        $('step_anchor_' + i).observe('click', createHandler(action, dao_id));
        Effect.Appear('step_anchor_' + i, {
                duration: 1,
                delay: (down_delay++)
        });
    }
}

这篇关于如何在JavaScript中的元素数组中添加带有参数的事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！