如何动态更改 foreach 循环内每个元素的输入值？答案

【问题标题】：how to dynamically change the input values for each element inside foreach loop?如何动态更改 foreach 循环内每个元素的输入值？
【发布时间】：2022-01-02 08:08:12
【问题描述】：

我想在 foreach 循环内更改每个地图元素的坐标值。例如，对于第一个地图元素，我想分配坐标[0] 等等。

function initMap() {    
var coordinates = [
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        }
  ]
var mapElements = document.querySelectorAll('.map');
mapElements.forEach((element) => {
        const uluru = { lat:coordinates[0].lat, lng:coordinates[0].lng};// how do I dynamically change values here
        console.log(uluru);
        const map = new google.maps.Map(element, {  
            zoom: 4,
            center: uluru,
        });
  const marker = new google.maps.Marker({
        position: uluru,
        map: map,
    });
});
}

【问题讨论】：

欢迎来到 Stack Overflow。 .forEach() 为元素提供 index。您可以使用它来动态迭代对象。

标签： javascript jquery arrays google-maps foreach

【解决方案1】：

考虑这个例子。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[index].lat,
      lng: coordinates[index].lng
    };
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

您也可以自己创建索引变量。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  var i = 0;
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[i].lat,
      lng: coordinates[i].lng
    };
    i++;
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

这两者都有一些注意事项，因为 forEach 循环可能比您的数组包含更多的元素。

【讨论】：

感谢您向我澄清并分享您的知识！