0

私は SVG マップと jQuery を使用して、誰かが州をクリックすると、jsonp を使用してその州内のキャンパスを表示するロケーター アプリを作成しています。どのパスがクリックされたかをjQueryに伝えるために、パスのURLの最後にハッシュを追加しています。

ハッシュが時間内に更新されていないように見えることを除いて、機能します。今回クリックした場所ではなく、前回クリックした場所が常に表示され、常に 1 クリック遅れます。

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 -->
4

1 に答える 1