如何使按钮执行相同的代码但相应地具有不同的变量？

Question

亲爱的大家。请不要苛刻地评判我，我是使用 JavaScript 和 OpenLayers.

的新手

我将 click 功能的相同操作应用到多个按钮，这些按钮实际上执行相同的任务但具有不同的值。

我有六个按钮放在 HTML 部分：

<button id="pan-to-kiev">Kiev</button>
<button id="pan-to-munich">Munich</button>
<button id="pan-to-vienna">Vienna</button>
<button id="pan-to-dresden">Dresden</button>
<button id="pan-to-enschede">Enschede</button>
<button id="pan-to-bonn">Bonn</button>

我也有放置在JS中的对象sheet：

var cities = [
  {name: "Kiev", lonlat: [30.523400, 50.450100], color: '#006699', id:"pan-to-kiev"},
  {name: "Munich", lonlat: [11.581980, 48.135125], color: '#AB4450', id:"pan-to-munich"},
  {name: "Vienna", lonlat: [16.373819, 48.208174], color: '#93648D', id:"pan-to-vienna"},
  {name: "Dresden", lonlat: [13.737262, 51.050409], color: '#FFC65D', id:"pan-to-dresden"},
  {name: "Enschede", lonlat: [6.893662, 52.221537], color: '#F16745', id:"pan-to-enschede"},
  {name: "Bonn", lonlat: [7.0954900, 50.7343800], color: '#4CC3D9', id:"pan-to-bonn"}
];

这是我编写的可执行代码，但我知道这是胡说八道，因为我的代码必须更加明确和简短，因为某些变量会重复。

function onClick(id, callback) {
  document.getElementById(id).addEventListener('click', callback);
}

onClick(cities[0]["id"], function() {
    view.animate({
      center: ol.proj.fromLonLat(cities[0]["lonlat"]),
      duration: 1500
    });
  });

onClick(cities[1]["id"], function() {
    view.animate({
      center: ol.proj.fromLonLat(cities[1]["lonlat"]),
      duration: 1500
    });
  });

onClick(cities[2]["id"], function() {
  view.animate({
    center: ol.proj.fromLonLat(cities[2]["lonlat"]),
    duration: 1500
  });
});

onClick(cities[3]["id"], function() {
  view.animate({
    center: ol.proj.fromLonLat(cities[3]["lonlat"]),
    duration: 1500
  });
});

onClick(cities[4]["id"], function() {
  view.animate({
    center: ol.proj.fromLonLat(cities[4]["lonlat"]),
    duration: 1500
  });
});

onClick(cities[5]["id"], function() {
  view.animate({
    center: ol.proj.fromLonLat(cities[5]["lonlat"]),
    duration: 1500
  });
});

而且我的想法行不通

 for (var city in cities) {
   onClick(cities[city]["id"], function() {
     view.animate({
       center: ol.proj.fromLonLat(cities[city]["lonlat"]),
       duration: 1500
     });
   });
   console.log(cities[city]["id"]);
}

您能帮我一下忙吗？或者至少向我解释一下我应该在这里更改什么才能使用 for 循环获得更好的代码？

非常感谢各位专家。

Answer 1

In for (var city in cities) city 已经是一个对象，在循环中使用 cities 没有意义，只需使用你拥有的对象。

但是，当遍历数组时，您应该使用 for...of or even better forEach(), as suggested in the MDN documentation for for...in。

这里是 forEach 与 lambdas 相同循环的实现，以避免 this:

出现任何问题

cities.forEach(city => { 
  onClick(city.id, () => {
    view.animate({
      center: ol.proj.fromLonLat(city["lonlat"]),
      duration: 1500
    });
  });
  console.log(city.id); 
});

Answer 2

你的代码很适合你的目的，唯一的问题是你在 for 循环中失去了你的上下文，所以你需要关闭函数来避免这种行为，所以你只需要改变这部分你的代码让它工作。

for (var city in cities) {
   onClick(city.id, function(cityPassed){
     return function() {
       view.animate({
         center: ol.proj.fromLonLat(cityPassed["lonlat"]),
         duration: 1500
       });
     }
   // pass the city variable
   }(city));
}

如5ar所说，不需要再次访问cities[city]["lonlat"]，因为city已经是数组内部的对象，所以你只需要使用它，请查看上面的[=20] =] 此处闭包：https://developer.mozilla.org/es/docs/Web/JavaScript/Closures

希望对您有所帮助

如何使按钮执行相同的代码但相应地具有不同的变量？

How to make buttons execute the same code but with different variables accordingly?

javascript

for-loop

onclick

button

openlayers