jQuery和SVG地圖。 URL哈希沒有正確更新

我正在使用SVG地圖和jQuery來製作定位器應用程序，當有人點擊某個狀態時，它會使用jsonp在該狀態下顯示校園。我在路徑的url末尾添加了一個散列，以告訴jQuery單擊了哪個路徑。jQuery和SVG地圖。 URL哈希沒有正確更新

它的工作原理除了哈希似乎沒有及時更新。你總是看不到這次你點擊的地方，而是你上次點擊的地方，總是點擊一下。

我試圖做一個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 -->

來源

2013-04-26 Rich Coy

你真的應該使用其他如果，浪費檢查那裏。但是你可以避免50個ifs，使用一個對象！ 'var states = {「AL」：「Alabama」，...}; var stateTitle = states [state];' – epascarello 2013-04-26 12:21:45

感謝您的提示。我已經更新了演示中的代碼。 – 2013-04-26 13:39:37

那麼你可能會不得不添加一個小的延遲來允許更改發生。其他選項是監聽[hashchange]（https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/hashchange）事件[這意味着您將有後退/前進按鈕支持] – epascarello 2013-04-26 13:51:35

@ epascarello的上面的評論讓我朝着正確的方向前進。我需要添加一個小小的延遲來讓哈希得到更新。我決定使用一個小的jQuery插件發現在http://theloveofcode.com/jquery/delayed

來源

2013-04-26 17:06:59

jQuery和SVG地圖。 URL哈希沒有正確更新

回答

相關問題