Javascript 如何使用多个位置'；for循环中的数据作为传单标记在单击事件中使用

我有一张单张地图，上面有标记，显示选定国家的顶级城市

locationList

是一个对象数组，每个对象包含每个城市的信息（lat、lng、cityName）。这些值用于将标记添加到地图上，并且在PHP调用WeatherAPI cURL例程时也被字符串化

我已经通过for循环成功地在地图上添加了显示每个城市名称的弹出窗口，但是我希望能够为每个标记添加功能，以便当您单击任何

$cityMarker

时，该特定位置的天气数据会在模式中弹出（在AJAX调用之后）

目前，这仅适用于locationList数组中的最后一个对象，因为click事件和后续AJAX调用仅从click事件处理程序之前的循环的最后一项中触发

是否有一种简单的方法可以绕过此问题，从而根据单击的位置，为所有位置触发单击事件？我不知道如何从循环中获取所有数据，以便在$cityMarker中单独使用

谢谢大家!

                    var locationList = [];
                    citiesArray.forEach(city => {
                        locationList.push({
                            lat: city.lat,
                            lng: city.lng,
                            cityName: city.toponymName
                        });
                    });
                    
                    console.log(locationList)
                    for (var i=0; i < locationList.length; i++) {
                        console.log(locationList[i])
                        $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
                        .addTo($layers)
                        .bindPopup('Name: ' + locationList[i]['cityName'])
                    }
                
                        $($cityMarker).on('click', () => {
                            $.ajax({
                                url: "getInfo.php",
                                type: 'POST',
                                data: {
                                    locationList: JSON.stringify(locationList)
                                },
                                success: function(result) {
                    
                                    console.log(result);

                                    for (let i=0; i < result.data.length; i++) {
                                        $('.modal').modal('show');
                                        $('#openWeatherResult').html(result['data'][i]['openWeather']['weather'][0]['description'])
                                    }                                       

                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown);
                                    console.log(textStatus);
                                    console.log(jqXHR);
                                }
                            });
                        });

var locationList=[]；
citiesArray.forEach（city=>{
locationList.push({
拉特：城市，拉特，
lng:city.lng，
cityName:city.toponymName
});
});
控制台日志（位置列表）
对于（变量i=0；i{
$.ajax({
url:“getInfo.php”，
键入：“POST”，
数据：{
locationList:JSON.stringify（locationList）
},
成功：功能（结果）{
控制台日志（结果）；
for（设i=0；i

PHP:

---

移动

单击循环中的侦听器：

 for (var i = 0; i < locationList.length; i++) {
    console.log(locationList[i])
    const $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
        .addTo($layers)
        .bindPopup('Name: ' + locationList[i]['cityName'])

    $($cityMarker).on('click', () => {
        $.ajax({
            url: "getInfo.php",
            type: 'POST',
            data: {
                locationList: JSON.stringify(locationList)
            },
            success: function(result) {

                console.log(result);

                for (let i = 0; i < result.data.length; i++) {
                    $('.modal').modal('show');
                    $('#openWeatherResult').html(result['data'][i]['openWeather']['weather'][0]['description'])
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(textStatus);
                console.log(jqXHR);
            }
        });
    });
}

然后将ajax调用更改为：

$($cityMarker).on('click', (e) => {
        var marker = e.target;
        $.ajax({
            url: "getSingleInfo.php",
            type: 'POST',
            data: {
                lat: marker.getLatLng().lat,
                lng: marker.getLatLng().lng,
            },
            success: function(result) {

移动
单击循环中的
侦听器：

 for (var i = 0; i < locationList.length; i++) {
    console.log(locationList[i])
    const $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
        .addTo($layers)
        .bindPopup('Name: ' + locationList[i]['cityName'])

    $($cityMarker).on('click', () => {
        $.ajax({
            url: "getInfo.php",
            type: 'POST',
            data: {
                locationList: JSON.stringify(locationList)
            },
            success: function(result) {

                console.log(result);

                for (let i = 0; i < result.data.length; i++) {
                    $('.modal').modal('show');
                    $('#openWeatherResult').html(result['data'][i]['openWeather']['weather'][0]['description'])
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(textStatus);
                console.log(jqXHR);
            }
        });
    });
}

然后将ajax调用更改为：

$($cityMarker).on('click', (e) => {
        var marker = e.target;
        $.ajax({
            url: "getSingleInfo.php",
            type: 'POST',
            data: {
                lat: marker.getLatLng().lat,
                lng: marker.getLatLng().lng,
            },
            success: function(result) {

编辑-感谢您的回复！我已经按照建议将click listener移动到了循环中，现在无论我单击什么标记，都会显示模式。但是，每个模式仍然只显示数组中最后一项的天气-此数据通过
$（'openWeatherResult'）.html（result['data'][i]['openWeather']['weather'][0]['description']
请参阅原始帖子中的PHP文件编辑，该文件-为了获取标记数据，我解码locationList，并使用每个位置的lat/lng调用天气API。希望有意义。谢谢again@price88我更新了我的answerEdit-感谢您的回复！我已经按照建议将click listener移动到循环中，现在为您显示模式但是，每个模式仍然只显示数组中最后一个项目的天气-此数据通过
$（'openWeatherResult'）.html（result['data'][I]['openWeather']['weather'][0]['description']
请参阅原始帖子中的PHP文件编辑，该文件-为了获取标记数据，我解码locationList，并使用每个位置的lat/lng调用天气API。希望有意义。谢谢again@price88我更新了我的答案