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哈希没有正确更新

回答

相关问题