Javascript函数是在循环中使用最后已知的参数？ [英] Javascript function is using the last known parameters in loop?

问题描述

我有一种情况，我需要动态创建按钮，我需要将onclick事件附加到每个按钮。
以上所有都做得很好。但是，当单击其中一个按钮时，被调用的函数即（animate（poly，map））使用poly的最后已知值和map作为参数。
我从今天早上起就遇到了这个问题。
请帮忙。谢谢

I have a situation whereby, i need to create buttons dynamically and i need to attached an onclick event to each of them. All of the above is done fine. However, when one of the button is clicked, the function that is called i.e (animate(poly,map)) uses the last known value of poly and map as parameters. I stuck with this problem since this morning. Please help. Thanks

for(var k=0;k<arr_altern.length;k++){
         my_div=create_div_interchange(arr[i],1,78,visited_bus,interchange_arr,arr_altern[k],null, my_interchange_array);

        $('#results').append(my_div);
        var x='animate';
        var v='#animater';
        v+=div_id;
        x+=div_id;
        map=create_map(div_id);
        var poly=retrieve_results_edges(bus_stops_visited,map);

        var strVar="";
        strVar += "<span class=\"animate\">";
        strVar += "<input type=\"button\"  id="+x+" name=\"animate\"  value=\"Animate\" \/>";
        strVar += "<\/span>";


        $(v).append(strVar);



        document.getElementById(x).onclick=function test(){

                animate(poly,map);

     }

     set_map(map);


    set_polyline_color(my_traversed_edge,map);

        }

更新解决方案：

i've replaced  

    document.getElementById(x).onclick=function test(){

                animate(poly,map);

     }

BY

$('#'+x).bind('click',{poly:poly,map:map}, function(event) {
             animate(event.data.poly,event.data.map)
      });

推荐答案

您正在声明地图没有 var 关键字的变量，因此它是在全局范围内创建的，因此只有一个地图变量，它使每个循环的值重写。

You are declaring the map variable without the var keyword so it's being created in the global scope, so there is only one map variable that gets it's value over-written each loop.

for(var k=0;k<arr_altern.length;k++){
    (function (k) {
        my_div=create_div_interchange(arr[i],1,78,visited_bus,interchange_arr,arr_altern[k],null, my_interchange_array);

        $('#results').append(my_div);
        var x      = 'animate' + div_id,
            v      = '#animater' + div_id,
            map    = create_map(div_id),
            poly   = retrieve_results_edges(bus_stops_visited, map),
            strVar = '<span class="animate"><input type="button"  id="' + x + '" name="animate"  value="Animate" /><\/span>';

        $(v).append(strVar);

        document.getElementById(x).onclick=function test(){

            animate(poly,map);

        }

        set_map(map);


        set_polyline_color(my_traversed_edge,map);
    })(k);
}

在IIFE（立即调用的函数表达式）中运行代码将创建其中的代码的新范围。这允许您在运行时声明变量，并且它们将在未来保留它们的值（例如，它们将可用于将来触发的事件处理程序）。注意我在声明所有变量时使用了 var 关键字，因此它们是在当前范围内创建的。

Running your code inside of an IIFE (Immediately-Invoked Function Expression) will create a new scope for the code within it. This allows you to declare variables at the time of running and they will hold their value into the future (for instance they will be available to event handlers that fire in the future). Notice I used the var keyword when declaring all the variables so they are created in the current scope.

您还可以使用 $。each（）来设置代码范围：

You could also use $.each() to scope your code:

$.each(arr_altern, function (k, val) {
        my_div=create_div_interchange(arr[i],1,78,visited_bus,interchange_arr,arr_altern[k],null, my_interchange_array);

        $('#results').append(my_div);
        var x      = 'animate' + div_id,
            v      = '#animater' + div_id,
            map    = create_map(div_id),
            poly   = retrieve_results_edges(bus_stops_visited, map),
            strVar = '<span class="animate"><input type="button"  id="' + x + '" name="animate"  value="Animate" /><\/span>';

        $(v).append(strVar);

        document.getElementById(x).onclick=function test(){

            animate(poly,map);

        }

        set_map(map);


        set_polyline_color(my_traversed_edge,map);
});

这篇关于Javascript函数是在循环中使用最后已知的参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！