如何使用 javascript/jquery 添加指向页面链接（url）的 OnClick 函数答案

【问题标题】：How do I add OnClick function that goes to a page link (url) with javascript/jquery如何使用 javascript/jquery 添加指向页面链接（url）的 OnClick 函数
【发布时间】：2011-09-25 06:27:43
【问题描述】：

好的，我正在使用这里的神奇地图插件：

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

我是一个菜鸟......无法弄清楚如何实现文档中“参考”部分中提到的参数，该文档声明您可以使用“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>

非常感谢任何帮助

【问题讨论】：

标签： javascript jquery onclick

【解决方案1】：

也许这样做会奏效：

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

【讨论】：

我确信使用 (event,code) 是朝着正确方向迈出的一步，但我不知道如何让它工作。基本上我希望所有美国州都有一个 URL。我希望如果我能弄清楚如何做一个，我可以为所有人添加链接。每个状态都有自己的 url。
如何将window.location .. 更改为alert(code)，这样您就可以弄清楚您想用它做什么？
问题是......我真的很菜鸟。我不明白如何正确地做到这一点。我所知道的是，现在当您单击该区域时，它可以在 div 中显示信息。我不想在同一页面的 div 上显示它，而是点击转到 url。我可以实现我在网上看到和搜索过的内容。但是在编写语法时，我不知道如何从头开始。我假设这个概念是这样的： function showmyinfo(event,code){ case 'pa': window.location = 'pa_page.php?code=' + code;休息;
我的意思是你可以将我的onRegionClick 粘贴到你的代码中，并将其中的单行window.location .. 更改为alert(code)。
对不起，我不知道这有什么帮助。我搜索了这些链接以获取任何其他帮助，但我无法弄清楚。 stackoverflow.com/questions/3669050/…stackoverflow.com/questions/2685958/…

【解决方案2】：

我发现这对我有用。

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'}
},

【讨论】：

另外，我能够将 jQuery 添加到函数中。例如，单击 Nevada 可以允许在同一页面中添加新内容。您还可以添加 /#url1 等等。只需查看您的映射文件，了解代码或数据的命名约定。

【解决方案3】：

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

$(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'
        }
    }
});
});

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

“index.php?id=2”的形式来自 TYPO3，所以你应该适应你正在使用的...

问候

【讨论】：