将 .click 函数添加到图像数组答案

【问题标题】：Adding a .click function to an array of images将 .click 函数添加到图像数组
【发布时间】：2018-09-06 07:16:53
【问题描述】：

您好，我有以下代码。我想用点击的图像给出的位置更新我的谷歌地图标记。目前，我在 for 循环中创建了一组图像。当用户单击图像时，我希望 restMarker 使用新的经度和纬度进行更新。然后标记位置在循环外更新。我似乎无法让下面的代码工作。

var restMarker = {
  lat: 0, //Just set to a trivial value 
  lng: 0
};

let imagesZom = $("#zomato");
for (i = 0; i < passArrayI.length; i++) {
  imagesZom.append(
    $("<a>").attr("href", passArrayW[i])
      .attr("target", "_blank")
      .append("<img id = img" + i + " " + "src =" + passArrayI[i] + "</img>")
      .click(function() {
        restMarker = {
          lat: parseFloat(passArrayLat[i]),
          lng: parseFloat(passArrayLong[i])
        };
      })
  )
}

setTimeout(function() {
  marker.setPosition(restMarker);
  map.setCenter(marker.getPosition());
}, 100)

当我运行以下代码时，它可以工作，但是当我尝试将它放入像上面这样的 for 循环中时，我无法让它工作。

var restMarker = {
  lat: parseFloat(passArrayLat[0]),
  lng: parseFloat(passArrayLong[0])
};
setTimeout(function() {
  marker.setPosition(restMarker);
  map.setCenter(marker.getPosition());
}, 100)

【问题讨论】：

这个问题是由变量范围引起的。循环中的let i = 0 应该可以解决这个问题。 JS loop variable scope 的可能重复项
这并没有解决问题
你不用</img>关闭img，只需/>

标签： javascript jquery html google-maps

【解决方案1】：

在循环中，您将在点击事件处理程序中覆盖相同的 restMarker 变量。您可以在图像的数据属性中推送经度和纬度，并在调用单击事件处理程序时检索它。见下面代码

    var restMarker = {
      lat: 0, //Just set to a trivial value 
      lng: 0
    };

    let imagesZom = $("#zomato");
    for (i = 0; i < passArrayI.length; i++) {
      imagesZom.append(
        $("<a>").attr("href", passArrayW[i])
          .attr("target", "_blank")
          .append("<img class='mapImage' id ='img" + i + "' src ='" + passArrayI[i] 
               + "' data-lat='" + passArrayLat[i] 
               + "'  data-long='" + passArrayLong[i] + "'> </img>");
        );
    }

    // write separeate click handler for all images
   $(document).on('click','.mapIamge',function() {
            var latVal = $(this).data('lat');
            var lngVal = $(this).data('long');
            restMarker = {
              lat: parseFloat(latVal),
              lng: parseFloat(lngVal)
            };
   });

    setTimeout(function() {
      marker.setPosition(restMarker);
      map.setCenter(marker.getPosition());
    }, 100);

【讨论】：