Javascript变量范围问题

我正在为地图创建一个标记列表，当它们被拖到地图上时（通过jquerydraggable），图像将替换为地图标记

我遇到的问题是，在创建标记控制器时，它们都有一个特定的类型，从列表中提取。当我遍历列表时，每个可拖动元素都会得到其“stop”函数，该函数使用变量“type”。。。现在，当拖动每个元素时，它们的行为就好像它们是最后一个元素的“类型”，而不是它们自己的类型

有谁能建议我如何重新构造它，使每个标记保持其特定的类型吗

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');
       image.setAttribute('id', 'draggable-' + markerTypes[i]);
       image.setAttribute('src', 'images/gui/' + markerTypes[i] + '.png');
       image.style.width = '30px';

       //Set type
       var type = markerTypes[i];

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: function(e){
             //Add marker to map
             var point = new google.maps.Point(e.pageX, e.pageY);
             customMap.addPlacemark(point, type);
          },
          cursorAt: {left: 15, top: 0}
       });


    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}

var createMarkerControl=function（）{
var markerTypes=[“定制”、“出口”、“食品”、“医疗”、“避难所”、“视频”]；
var control=document.createElement（'div'）；
setAttribute（'id'，'markerInput'）；
对于（var i=0；i

这是因为JavaScript没有块级作用域，只有函数级作用域。

图像

和

类型

变量的作用域是

createMarkerControl

，而不是循环。更重要的是，它们的作用域在可拖动闭包的外部，因此每个闭包都将共享

类型

变量

我想你希望你的内环看起来更像这样：

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

   var createDraggable = function(image, type) {
       image.setAttribute('id', 'draggable-' + type);
       image.setAttribute('src', 'images/gui/' + type + '.png');
       image.style.width = '30px';

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: function(e){
             //Add marker to map
             var point = new google.maps.Point(e.pageX, e.pageY);
             customMap.addPlacemark(point, type);
          },
          cursorAt: {left: 15, top: 0}
       });
   };

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');

       //Set type
       var type = markerTypes[i];

       createDraggable(image, type);

    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');
       image.setAttribute('id', 'draggable-' + markerTypes[i]);
       image.setAttribute('src', 'images/gui/' + markerTypes[i] + '.png');
       image.style.width = '30px';

       //Set type
       var type = markerTypes[i];

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: createStopper(type),
          cursorAt: {left: 15, top: 0}
       });


    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}


var createStopper = function(type) {
    return function(e){
        var point = new google.maps.Point(e.pageX, e.pageY);
        customMap.addPlacemark(point, type);
    }   
} 

var createMarkerControl=function（）{
var markerTypes=[“定制”、“出口”、“食品”、“医疗”、“避难所”、“视频”]；
var control=document.createElement（'div'）；
setAttribute（'id'，'markerInput'）；
var createDragable=函数（图像，类型）{
setAttribute（'id'，'draggable-'+类型）；
setAttribute（'src'，'images/gui/'+type+'.png'）；
image.style.width='30px'；
//使元素可拖放
控件。追加子对象（图像）；
$（图像）。可拖动({
助手：“克隆”，
停止：功能（e）{
//将标记添加到地图
var point=new google.maps.point（e.pageX，e.pageY）；
customMap.addPlacemark（点、类型）；
},
光标：{左：15，上：0}
});
};
对于（var i=0；i

---

通过将逻辑放在子函数中，可以确保对

类型

和

图像

的引用对于内部闭包是唯一的。

这是因为JavaScript没有块级范围，只有函数级范围。

图像

和

类型

变量的作用域是

createMarkerControl

，而不是循环。更重要的是，它们的作用域在可拖动闭包的外部，因此每个闭包都将共享

类型

变量

我想你希望你的内环看起来更像这样：

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

   var createDraggable = function(image, type) {
       image.setAttribute('id', 'draggable-' + type);
       image.setAttribute('src', 'images/gui/' + type + '.png');
       image.style.width = '30px';

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: function(e){
             //Add marker to map
             var point = new google.maps.Point(e.pageX, e.pageY);
             customMap.addPlacemark(point, type);
          },
          cursorAt: {left: 15, top: 0}
       });
   };

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');

       //Set type
       var type = markerTypes[i];

       createDraggable(image, type);

    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');
       image.setAttribute('id', 'draggable-' + markerTypes[i]);
       image.setAttribute('src', 'images/gui/' + markerTypes[i] + '.png');
       image.style.width = '30px';

       //Set type
       var type = markerTypes[i];

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: createStopper(type),
          cursorAt: {left: 15, top: 0}
       });


    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}


var createStopper = function(type) {
    return function(e){
        var point = new google.maps.Point(e.pageX, e.pageY);
        customMap.addPlacemark(point, type);
    }   
} 

var createMarkerControl=function（）{
var markerTypes=[“定制”、“出口”、“食品”、“医疗”、“避难所”、“视频”]；
var control=document.createElement（'div'）；
setAttribute（'id'，'markerInput'）；
var createDragable=函数（图像，类型）{
setAttribute（'id'，'draggable-'+类型）；
setAttribute（'src'，'images/gui/'+type+'.png'）；
image.style.width='30px'；
//使元素可拖放
控件。追加子对象（图像）；
$（图像）。可拖动({
助手：“克隆”，
停止：功能（e）{
//将标记添加到地图
var point=new google.maps.point（e.pageX，e.pageY）；
customMap.addPlacemark（点、类型）；
},
光标：{左：15，上：0}
});
};
对于（var i=0；i

---

通过将逻辑放在子函数中，可以确保对

类型

和

图像

的引用对于内部闭包是唯一的。

我不认为JavaScript中的

for

循环有自己的变量范围（就像其他语言中有时做的那样），因此，您定义的

类型

变量绑定在函数的范围内。所以你真的需要另一个立体示波器

我个人会制作一个助手函数，为您生成

stop

闭包。这将创建一个稳定的范围，您的闭包可以生存。。。大概是这样的：

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

   var createDraggable = function(image, type) {
       image.setAttribute('id', 'draggable-' + type);
       image.setAttribute('src', 'images/gui/' + type + '.png');
       image.style.width = '30px';

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: function(e){
             //Add marker to map
             var point = new google.maps.Point(e.pageX, e.pageY);
             customMap.addPlacemark(point, type);
          },
          cursorAt: {left: 15, top: 0}
       });
   };

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');

       //Set type
       var type = markerTypes[i];

       createDraggable(image, type);

    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}

var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

    for (var i = 0; i < markerTypes.length; i++){
       var image = document.createElement('img');
       image.setAttribute('id', 'draggable-' + markerTypes[i]);
       image.setAttribute('src', 'images/gui/' + markerTypes[i] + '.png');
       image.style.width = '30px';

       //Set type
       var type = markerTypes[i];

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: createStopper(type),
          cursorAt: {left: 15, top: 0}
       });


    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}


var createStopper = function(type) {
    return function(e){
        var point = new google.maps.Point(e.pageX, e.pageY);
        customMap.addPlacemark(point, type);
    }   
} 

var createMarkerControl=function（）{
var markerTypes=[“定制”、“出口”、“食品”、“医疗”、“避难所”、“视频”]；
var control=document.createElement（'div'）；
setAttribute（'id'，'markerInput'）；
对于（var i=0；i