如何添加使用 javascript/jquery 转到页面链接 (url) 的 OnClick 函数

发布于 2024-12-06 06:30:19 字数 1244 浏览 0 评论 0原文

好的，我正在使用这里找到的很棒的地图插件：

我是一个菜鸟...无法弄清楚如何实现文档中“参考”部分提到的参数，该部分指出您可以使用“onRegionClick”。

谁能告诉我如何实现这个，以便当我单击一个区域（美国地图上的一个州）时它会转到一个 URL？

如果这有帮助的话，我当前的工作示例使用我想要的参数在页面上显示我想要的信息，但仅在现有页面上的 div （div 称为 #location ）中。我希望它能到达一个网址。

<script>
$(function(){
    $('#main').vectorMap({
        map: 'usa_en',
        color: '#aaaaaa',
        hoverColor: false,
        hoverOpacity: 0.5,
        colors: {pa:'#F00, ny:'#F00, },
        backgroundColor: 'false',
        onRegionClick: showmyinfo       
    });
});

function showmyinfo(event,label){
    switch (label)
    {
        case 'pa':
            $('#location').html('<h3>PA Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Havertown, PA 19083</li></ul>');
            break;
        case 'ny':
            $('#location').html('<h3>NY Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Brooklyn, NY 11249</li></ul>');
            break;
    }
}
</script>

非常感谢任何帮助

原文

Ok I am using the fantastic map plugin found here:

http://jvectormap.owl-hollow.net/#maps

I am a noob ... can't figure out how to implement the parameter mentioned in the "reference" part on the documention which states you can use "onRegionClick".

Can anyone tell me how to implement this so that when I click on a region ( A State on the US Map ) it goes to a URL?

If this helps at all, my current working example shows the info I want on the page using the Parameter I want, but only in a div (div is called #location ) on the existing page. I would like it to got to a url instead.

<script>
$(function(){
    $('#main').vectorMap({
        map: 'usa_en',
        color: '#aaaaaa',
        hoverColor: false,
        hoverOpacity: 0.5,
        colors: {pa:'#F00, ny:'#F00, },
        backgroundColor: 'false',
        onRegionClick: showmyinfo       
    });
});

function showmyinfo(event,label){
    switch (label)
    {
        case 'pa':
            $('#location').html('<h3>PA Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Havertown, PA 19083</li></ul>');
            break;
        case 'ny':
            $('#location').html('<h3>NY Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Brooklyn, NY 11249</li></ul>');
            break;
    }
}
</script>

Any help greatly appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱本泡沫多脆弱 2024-12-13 06:30:19

也许这样做会起作用：

$(function(){
    $('#main').vectorMap({
        ..
        onRegionClick: function (event, code) {
            window.location = 'page.php?code=' + code;
        }
    });
});

Maybe doing this would work:

$(function(){
    $('#main').vectorMap({
        ..
        onRegionClick: function (event, code) {
            window.location = 'page.php?code=' + code;
        }
    });
});

回复收藏 0 原文

野生奥特曼 2024-12-13 06:30:19

我发现这对我有用。

onRegionClick: function(event, code){
                        if (code == "US-AZ") {window.location = '/url1'}
                        if (code == "US-TX") {window.location = '/url2'}
                        if (code == "US-CA") {window.location = '/url3'}
                        if (code == "US-NV") {window.location = '/url4'}
                        if (code == "US-LA") {window.location = '/url5'}
},

I found this to work for me.

onRegionClick: function(event, code){
                        if (code == "US-AZ") {window.location = '/url1'}
                        if (code == "US-TX") {window.location = '/url2'}
                        if (code == "US-CA") {window.location = '/url3'}
                        if (code == "US-NV") {window.location = '/url4'}
                        if (code == "US-LA") {window.location = '/url5'}
},

回复收藏 0 原文

凌乱心跳 2024-12-13 06:30:19

我刚刚遇到了同样的问题。但我找到了一个解决方案：

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'germany_en',
    backgroundColor: 'red',
    hoverColor: 'black',
    onRegionClick: function(event, code) {
        if (code === 'th') {
            window.location = 'index.php?id=2'
        }
        else if (code === 'mv') {
            window.location = 'index.php?id=3'
        }
        else if (code === 'rp') {
            window.location = 'index.php?id=4'
        }
    }
});
});

现在您可以为每个区域创建一个单独的网址（由其代码标识）。

形式“index.php?id=2”来自 TYPO3，因此您应该根据您正在使用的内容进行调整...

问候

i just had the same problem. but i found a solution:

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'germany_en',
    backgroundColor: 'red',
    hoverColor: 'black',
    onRegionClick: function(event, code) {
        if (code === 'th') {
            window.location = 'index.php?id=2'
        }
        else if (code === 'mv') {
            window.location = 'index.php?id=3'
        }
        else if (code === 'rp') {
            window.location = 'index.php?id=4'
        }
    }
});
});

now you can create a separate url for every region (identified by its code).

the form "index.php?id=2" comes from TYPO3, so you should adapt it to what you're using...

greetings

回复收藏 0 原文

~没有更多了~