根据链接中的参数更改文本 - 例如。带有名字的欢迎信息

Question

我在创建简单脚本时遇到问题。 当用户单击特别准备的链接时，我正在尝试触发文本更改。

我正在通过电子邮件或信使向我的朋友发送我们锦标赛网站的链接。 在这个网站上，我想通过自定义消息欢迎他们。 但他们每个人都有单独的链接，如：

www.mywebsite.com/#john1
www.mywebsite.com/#john2

所以当前。其中一个通过链接访问网站：

www.mywebsite.com/#john1

我想为他显示自定义消息。自定义标题。 但是当其他朋友通过链接访问网站时：

www.mywebsite.com

一切都是默认的。无需更改此标题。

有什么简单的方法可以实现吗？

我试图用 jquery 实现类似 onclick 事件的东西。为所有这些设置文本，然后通过 mywebsite.com/#john1 等访问它们 但看起来这是一个坏主意，因为在将参数添加到链接时这不起作用。 仅当点击网站上的元素时。

我尝试过这样的事情：

$(function() {
    $("#john1, #john2").on("click", function(e) {
        var txt = "";
        switch ($(this).prop("id")) {
            case "john1":
                txt = "Hi john 1";
                break;
            case "john2":
                txt = "Hi John 2";
                break;
        }
        $("#h1-title").text(txt);
    })
})

而不是像这样访问：www.mywebsite.com/#john2

但我知道这不是一个好的用例。

Answer 1

所以基本上你要做的是为每个访问者定制一个问候消息，你给他发送一个定制的 URL，但不显示普通 URL 的消息。

这可以按如下方式完成：

1. 定义自定义 URL 的格式。 www.mywebsite.com#john1 看起来很好。 （注意哈希前没有斜线！不是子目录。
2. 具有确定访问者姓名的函数：

function getVisitorName(){
    let name = window.location.href;
    let indexOfHash = name.indexOf('#');
    if(indexOfHash === -1){return null;}
    name = name.slice(indexOfHash+1, name.length)
    return name;
  }

1. 现在，根据您喜欢的事件调用此函数。 （例如页面加载）：

$(document).ready(()=>{
    let name = getVisitorName;
    if (name === null) {return;}
    let message = "Hi " + name + " !";
    $("#h1-title").text(message);
  })

4. 将链接发送给自定义为www.mywebsite.com#John1、www.mywebsite.com#John2..等的朋友。

希望这会有所帮助。