US MAP,状态链接到HTML,HTML使用jQuery在页面上的DIV中加载

US MAP, States link to HTML, HTML loads in a DIV on the page using jQuery

本文关键字:HTML DIV 加载 jQuery 状态 MAP 链接 US 使用      更新时间:2023-09-26

免责声明:我链接到的网站目前只有针对阿拉斯加和阿拉巴马州编码的功能,所以只点击那些,其他的还没有工作。我遇到的问题是,当单击阿拉斯加或阿拉巴马州或任何其他州时,jquery 并不总是返回结果。我认为这与浏览器兼容性或jquery版本有关,但是在这一点上,我没有想法,需要您的帮助。

该网站是:

http://electrix.com/reps_find_map_mag.html

我编码结果的唯一两个州是阿拉斯加州和阿拉巴马州,所以请尝试单击它们,其他州尚不起作用。

地图是拉斐尔。我正在使用的jquery插件是:

http://newsignature.github.io/us-map/

我的jquery加载地图,然后在正确的DIV中加载另一个html页面在这里:

    <script>
    $(document).ready(function () {
    $('#map').usmap({
 click: function(event, data) {
    var description = "No state info loaded for this state.";
    switch (data.name)
    {
                case 'AL':
            description = 'alabama';
            break;
        case 'AK':
            description = 'alaska';
            break;
        case 'AZ':
            description = 'arizona';
            break;
        case 'AR':
            description = 'arkansas';
            break;
        case 'CA':
            description = 'california';
            break;
        case 'CO':
            description = 'colorado';
            break;
        case 'CT':
            description = 'connecticut';
            break;
        case 'DE':
            description = 'delaware';
            break;
        case 'FL':
            description = 'florida';
            break;
        case 'GA':
            description = 'georgia';
            break;
        case 'HI':
            description = 'hawaii';
            break;
        case 'ID':
            description = 'idaho';
            break;
        case 'IL':
            description = 'illinois';
            break;
        case 'IN':
            description = 'indiana';
            break;
        case 'IA':
            description = 'iowa';
            break;
        case 'KS':
            description = 'kansas';
            break;
        case 'KY':
            description = 'kentucky';
            break;
        case 'LA':
            description = 'louisiana';
            break;
        case 'ME':
            description = 'maine';
            break;
        case 'MD':
            description = 'maryland';
            break;
        case 'MA':
            description = 'massachusetts';
            break;
        case 'MI':
            description = 'michigan';
            break;
        case 'MN':
            description = 'minnesota';
            break;
        case 'MS':
            description = 'mississippi';
            break;
        case 'MO':
            description = 'missouri';
            break;
        case 'MT':
            description = 'montana';
            break;
        case 'NE':
            description = 'nebraska';
            break;
        case 'NV':
            description = 'nevada';
            break;
        case 'NH':
            description = 'newhampshire';
            break;
        case 'NJ':
            description = 'newjersey';
            break;
        case 'NM':
            description = 'newmexico';
            break;
        case 'NY':
            description = 'newyork';
            break;
        case 'NC':
            description = 'northcarolina';
            break;
        case 'ND':
            description = 'northdakota';
            break;
        case 'OH':
            description = 'ohio';
            break;
        case 'OK':
            description = 'oklahoma';
            break;
        case 'OR':
            description = 'oregon';
            break;
        case 'PA':
            description = 'pennsylvania';
            break;
        case 'RI':
            description = 'rhodeisland';
            break;
        case 'SC':
            description = 'southcarolina';
            break;
        case 'SD':
            description = 'southdakota';
            break;
        case 'TN':
            description = 'tennessee';
            break;
        case 'TX':
            description = 'texas';
            break;
        case 'UT':
            description = 'utah';
            break;
        case 'VT':
            description = 'vermont';
            break;
        case 'VA':
            description = 'virginia';
            break;
        case 'WA':
            description = 'washington';
            break;
        case 'WV':
            description = 'westvirginia';
            break;
        case 'WI':
            description = 'wisconsin';
            break;
        case 'WY':
            description = 'wyoming';
            break;
        case 'DC':
            description = 'washingtondc';
            break;
        // etc
    }
    $('#clicked-state').load('http://electrix.com/usrep/' + description + '.html');
     $("body").css("background-color", "#333");
  } 
    });
  });  
</script>

我已经给了你我正在使用的页面和jquery,如果你知道为什么这段代码在所有浏览器中都不起作用的解决方案,或者如果你有更好的代码来实现这一目标,我会非常感激。

根据我所看到的,唯一的问题是您没有为所有状态正确设置 HTML 页面。 因此,当您根据描述名称在末尾运行 .load() 方法时,由于该文件不存在,它无法将任何内容加载到 #clicked 状态,因此它会以静默方式中断。

代码本身很好。 只需让所有其他目标页面正常工作,您就可以开始了。