Question

我有这段代码：

siteCheckboxes.each(function () {

        var lat = $(this).attr("lat");
        var lng = $(this).attr("lng");
        var myLatlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({ icon: smallDotIcon, position: myLatlng, map: map, title: $(this).attr("siteName") });
        var $checkbox = $(this);
        $(this).click(function () {
            if ($(this).attr("checked")) {

              marker.setIcon(null);  
            } else {
               marker.setIcon(smallDotIcon);

            }

        });
        google.maps.event.addListener(marker, 'click', function () {
              $checkbox.click();
        });


    });

我的想法是，我有几个带有站点名称的复选框和一个带有小点的地图，用于地图上的每个站点。当用户选中站点复选框时，地图上的标记应更改为完整标记。这部分应用程序运行正常。

当用户点击标记时，相关复选框的状态应该更改以及标记的形状，但它不起作用。

当用户点击标记时，复选框选中状态和标记形状变得不同步。问题是什么？

一些调试显示，如果用户单击标记，则调用标记的单击事件，并且还会调用相关复选框的单击事件，但在复选框单击事件结束后，选中状态会更改。

为什么点击事件结束后会发生变化？

Answer 1

问题在于，您正在遍历所有复选框，创建单击处理程序。但是，当用户单击任何标记时，它将始终使用$ checkbox的最后一个值，而不是与创建标记eventlistener时对应的值。

你需要关闭。

尝试这样的事情。使用.each循环创建一个新的顶级函数 bindClick 。在.each循环中，调用该函数。然后，这将使用您当时正在循环的任何复选框创建事件侦听器。

siteCheckboxes.each(function () {
    var lat = $(this).attr("lat");
    var lng = $(this).attr("lng");
    var myLatlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({ icon: smallDotIcon, position: myLatlng, map: map, title: $(this).attr("siteName") });
    var $checkbox = $(this);


    bindClick($checkbox, marker);
});


function bindClick(checkbox, marker) {
    google.maps.event.addListener(marker, 'click', function () {
          checkbox.click();
    });
}

为什么在触发click事件后更改了checked属性？

1 个答案: