Last active
January 1, 2016 10:29
-
-
Save tkfm-yamaguchi/8131601 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>closure pattern</title> | |
| </head> | |
| <body> | |
| <div id="target1"> | |
| <h1>Target 1</h1> | |
| </div> | |
| <div id="target2"> | |
| <h1>Target 2</h1> | |
| </div> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> | |
| <script type="text/javascript" charset="UTF-8"> | |
| $(function(){ | |
| var i, len, array = [0,1,2,3,4,5,6,7,8,9]; | |
| // #target1 | |
| var div1; | |
| for (i = 0, len = array.length; i < len; i++) { | |
| div1 = $("<div></div>"); | |
| div1.addClass("div1no" + i); | |
| div1.appendTo($("#target1")); | |
| div1.text("no" + i); | |
| div1.on("click", function(){ | |
| // always returns [div.div1no9, ...] | |
| console.log(div1); | |
| }); | |
| } | |
| // #target2 | |
| for (i = 0, len = array.length; i < len; i++) { | |
| var div2; | |
| div2 = $("<div></div>"); | |
| div2.addClass("div2no" + i); | |
| div2.appendTo($("#target2")); | |
| div2.text("no" + i); | |
| div2.on("click", function(){ | |
| // always returns [div.div2no9, ...] | |
| console.log(div2); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Closure pattern has been broken? */ | |
| var data = {...}; | |
| for (_i = 0, _len = data.length; _i < _len; _i++) { | |
| point = data[_i]; | |
| marker_options = ... /* creates option object from point */ | |
| marker = new google.maps.Marker(marker_options); | |
| google.maps.event.addListener(marker, 'click', function() { | |
| // this logs clicked marker ( EXPECTED ) | |
| console.log(this); | |
| // XXX: this always logs the marker which associated with the last of data | |
| console.log(marker); | |
| // this returns false except of the marker which associated with the last of data | |
| console.log(marker === this); | |
| }); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment