爲什麼點擊事件發生後，checked屬性發生了變化？

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(); 
     }); 


    }); 

的想法是，我有幾個複選框以網站的名稱，並用小圓點在地圖上的每個站點地圖。當用戶選中一個網站複選框時，地圖上的標記應該變爲滿標記。這部分應用程序正常工作。

當用戶在點擊標記，相關的複選框的狀態應該改變，也標記的形狀，但它不工作。

當用戶點擊一個標記，該複選框選中狀態和標誌形狀變成了sync.What的是什麼問題？

一些調試表明我，如果一個標記用戶點擊，被稱爲標記的點擊事件，以及相關的複選框的Click事件也被稱爲，但複選框單擊事件結束後的選中狀態的變化。

爲什麼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(); 
    }); 
}