Question

所以我正在尝试创建一个名为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

Answer 1

以这种方式从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>

Answer 2

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

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

UPD。 Abobe无效。它应该是onclick="testBrowser.call(this)"属性，href="javascript:上下文本身是全局对象，所以调用（this）是没有意义的。 jQuery解决方案要好得多。

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

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

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

检测单击链接的ID以更改链接的位置？

2 个答案: