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

Question

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

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

我在 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 表中的对象:

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

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

但是，当遍历数组时，您应该使用 for...of甚至更好forEach() , 如 the MDN documentation for for...in 中所建议.

这里是 forEach 使用 lambda 执行相同的循环以避免 this 出现任何问题:

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