检测单击的链接的 ID 以更改链接的去向

Detect the ID of a clicked link to change where the link goes?

本文关键字：链接 ID 单击 检测      更新时间：2023-09-26

所以我正在尝试制作一个名为testBrowser()的JavaScript函数来检测用户是否在移动设备上（我有这个工作）。

我有三个链接运行相同的功能，但我希望每个链接都有不同的结果。我已经找到了我想做的方法，但实际上无法做到，因为我需要检测单击的链接的 ID。我在网上找到的所有选项似乎都不起作用！

我正在努力解释这一点，但阅读我的代码应该会有所帮助。

.HTML： 

<ul>
    <li><a href="javascript:testBrowser()" id="tumblr">z</a></li>
    <li><a href="javascript:testBrowser()" id="twitter">a</a></li>
    <li><a href="javascript:testBrowser()" id="insta">x</a></li>
</ul>

JavaScript：

function testBrowser(){
    if(/Android|webOS|iPhone|iPod/BlackBerry/i.test(navigator.userAgent)){
        if($(this).attr('id') = "insta"){
            window.location = "instagram://user?id=xxxxxxxx";
        }
        else if($(this).attr('id') = "tumblr"){
            window.location = "tumblr://x-callback-url/blog?blogName=blogname";
        }
        else if($(this).attr('id') = "twitter"){
            window.location = "twitter://user?screen_name=handle";
        }
    }
    else{
        if($(this).attr('id') = "insta"){
            window.location = "http://www.instagram.com/id";
        }
        else if($(this).attr('id') = "tumblr"){
            window.location = "http://blogname.tumblr.com/";
        }
        else if($(this).attr('id') = "twitter"){
            window.location = "http://www.twitter.com/handle";
        }           
    }
}

我做错了什么？！

JSFiddle

以这种方式从href调用不会返回正确的this引用（它将引用window而不是anchor）。您可以通过编程方式向链接添加单击函数。jQuery可以在一行中做到这一点。这实际上是首选方式。

$("li > a[id]").on("click", testBrowser);

这将选择锚点并将testBrowser添加为函数。

其他改进：

  • 您在 if 子句中使用了单=，它们需要是双==或三===才能进行比较。
  • 您的正则表达式包含一个错误，其中/需要是|。
  • 我将hrefs更改为void(0)，因此它们仍然充当链接，但实际上什么都不做。

$("li > a[id]").on("click", testBrowser);
function testBrowser(){
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                if($(this).attr('id') == "insta"){
                    window.location = "instagram://user?id=xxxxxxxx";
                }
                else if($(this).attr('id') == "tumblr"){
                    window.location = "tumblr://x-callback-url/blog?blogName=blogname";
                }
                else if($(this).attr('id') == "twitter"){
                    window.location = "twitter://user?screen_name=handle";
                }
            }
            else{
                if($(this).attr('id') == "insta"){
                    window.location = "http://www.instagram.com/id";
                }
                else if($(this).attr('id') == "tumblr"){
                    window.location = "http://blogname.tumblr.com/";
                }
                else if($(this).attr('id') == "twitter"){
                    window.location = "http://www.twitter.com/handle";
                }
            }
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="javascript:void(0)" id="tumblr">z</a></li>
    <li><a href="javascript:void(0)" id="twitter">a</a></li>
    <li><a href="javascript:void(0)" id="insta">x</a></li>
</ul>

当前调用testBrowser的方式在全局对象上下文中执行它，即 window .您可以像这样更改 HTML：

<a href="javascript:testBrowser.call(this)" target="_blank" class="socicon" id="tumblr">z</a>

上。阿博贝行不通。它应该是onclick="testBrowser.call(this)"属性，上下文本身href="javascript:全局对象，所以call（this）没有意义。jQuery解决方案要好得多。

在这种情况下，您只需使用 this.id 访问链接id。无需用$()包裹它.

问题#2。使用比较运算符===而不是赋值=：

if (this.id === "insta") {
    window.location = "instagram://user?id=xxxxxxxx";
}
相关文章：