我正在使用 SVG 地图和 jQuery 制作一个定位器应用程序，当有人点击一个州时，它将使用 jsonp 在该州内调出校园。我在路径 url 的末尾添加了一个哈希，以告诉 jQuery 单击了哪个路径。
它的工作原理是哈希似乎没有及时更新。您总是看到的不是您这次单击的位置，而是您上次单击的位置，总是在后面单击。
我试图制作一个 jsfiddle，但它不会拉入 svg 地图，所以下面是一个演示。
这是演示（单击“按州搜索”选项卡）： http ://coypress.com/test/campus_locator_new.html
有问题的jQuery：
// Map Clicks
$("#tab2.tab_content").click(function() {
state = location.hash.replace("#","");
jsonLink = "http://ml.uscm.org/ministries.json?state=" + state + "&active=true&callback=?";
alert(jsonLink);
getResults();
});
function getResults() {
stateTitle ="";
var states = {"AL": "Alabama", "AK": "Alaska", "AZ": "Arizona", "AR": "Arkansas", "CA": "California", "CO": "Colorado", "CT": "Connecticut",
"DE": "Delaware", "FL": "Florida", "GA": "Georgia", "HI": "Hawaii", "ID": "Idaho", "IL": "Illinois", "IN": "Indiana",
"IA": "Iowa", "KS": "Kansas", "KY": "Kentucky", "LA": "Louisiana", "ME": "Maine", "MD": "Maryland", "MA": "Massachusetts",
"MI": "Michigan", "MN": "Minnesota", "MS": "Mississippi", "MO": "Missouri", "MT": "Montana", "NE": "Nebraska", "NV": "Nevada",
"NH": "New Hampshire", "NJ": "New Jersey", "NM": "New Mexico", "NY": "New York", "NC": "North Carolina", "ND": "North Dakota",
"OH": "Ohio", "OK": "Oklahoma", "OR": "Oregon", "PA": "Pennsylvania", "RI": "Rhode Island", "SC": "South Carolina",
"SD": "South Dakota", "TN": "Tennessee", "TX": "Texas", "UT": "Utah", "VT": "Vermont", "VA": "Virginia", "WA": "Washington",
"WV": "West Virginia", "WI": "Wisconsin", "WY": "Wyoming", "DC": "Washington DC"};
var stateTitle = states[state];
$("#state").text("");
$("#campus_title").text("Campuses in " + stateTitle);
// alert("getResults Has Run!");
$.getJSON(jsonLink,
function (data) {
$.each(data, function (key, value) {
$("#state").append(
"<h5><a href='http://ml.uscm.org/ministries/" + value.id + ".json'>" + value.name +
"</a> <small>(" + value.city +
", " + value.state +
")</small></h5>");
});
});
};
相关的 HTML：
<div id="tab2" class="tab_content">
<p>Click on a state to see the campuses.</p>
<div id="map"></div>
<div class="campus-map-finder-results" style="padding-top: 50px;">
<h2 id="campus_title"></h2>
<div id="state"></div>
</div>
</div><!-- #tab2 -->