Question

我在JS中遇到一个简单的问题。我有一个带有一堆标记的Leaflet地图，单击一个标记时，您会弹出一个带有一些信息和两个按钮的弹出窗口。单击按钮时，我尝试显示具有更多信息的div。看来，当我单击它时，将显示div以及所有其他一个。对于循环中的所有标记，该条件似乎都是正确的，因为单击了一个按钮，这是不正确的。

你们有什么主意吗？

$.getJSON(uri, function(data){
      for (let river in data.rivers){

          var popup = data.rivers[river].name +
              '<br/><b>Water Level :</b> ' + data.rivers[river]['water-level'] + " m3/s" +
              '<br/><b>Water Temperature :</b> ' + data.rivers[river]['temperature'] + " °C" +
              '<br/><b>Sample Time :</b> ' + data.rivers[river]['date-and-time'] +
              '<button type="button" id="more-infos" class="btn btn-primary">More infos</button>' + " " +
              '<button type="button" class="btn btn-warning">Alert me</button>';

          // The problem is here
          $("div").on('click', '#more-infos', function (e) {
            onClickMoreDetails(data.rivers[river]);
          });

          var marker = new L.marker(L.latLng(parseFloat(data.rivers[river].latitude), parseFloat(data.rivers[river].longitude)));
          marker.bindPopup(popup);
      }
  });
  
  
  function onClickMoreDetails(data){
    console.log(data);
    }

Answer 1

首先，我没有在模板中使用任何可能重复的ID。

第二个–确定要显示哪条河流的信息，我在“更多信息”按钮上使用了数据属性data-river="'+i+'"。

毕竟，在鼠标单击处理程序中，从event.target获取数据属性值，然后从对象映射中检索数据。

function onClickMoreDetails(event){
  console.log(data.rivers[event.target.dataset['river']]);
}

查看以下内容：https://jsfiddle.net/fqL9g6cb/

单击传单弹出窗口中的按钮时，显示执行功能的问题

1 个答案: