Javascript 我如何创建一个HTML页面，其中可以根据出现的URL参数显示div的多个版本_Javascript_Jquery

Javascript 我如何创建一个HTML页面，其中可以根据出现的URL参数显示div的多个版本

javascript jquery

Javascript 我如何创建一个HTML页面，其中可以根据出现的URL参数显示div的多个版本,javascript,jquery,Javascript,Jquery,我试图实现的是，在页面的URL上添加“？HELLO”之类的内容，从而显示不同的消息。就本问题而言，页面内容可以如此简单： <!doctype html> <html> <head> <title>Dynamic Content</title> <style> #container {width:100%height:100px;background:#000;} #container div {text-align:cent

我试图实现的是，在页面的URL上添加“？HELLO”之类的内容，从而显示不同的消息。就本问题而言，页面内容可以如此简单：

<!doctype html>
<html>
<head>
<title>Dynamic Content</title>
<style>
#container {width:100%height:100px;background:#000;}
#container div {text-align:center;color:pink;}
</style>
</head>
<body>
<div id="container">
<div id="hello">How are you</div>
<div id="goodbye">See you later</div>
<div id="whoAreYou">Get Out</div>
</div>
</body>
</html>


动态内容
#容器{宽度：100%高度：100px；背景：#000；}
#容器div{文本对齐：居中；颜色：粉红色；}
你好吗
回头见
走出

此外，我还想知道如何使用单个div并通过ID获取元素来实现这一点。我不确定最终哪一个更适合我。我可能希望根据参数添加其他元素，如链接或图像。我的一个客户有一个电子商务网站，正在考虑为那些登陆该网站的客户实现类似这样的功能，这些客户的促销代码看起来像“？SourceCode=HELLO”，但我假设字符串就是字符串

这里有一把小提琴，尽管我认为它对测试更新后的URL没有帮助

我正在更新答案以包括实现。似乎您真的希望根据查询字符串的值更改消息传递。最好以一种可伸缩的方式存储消息，然后只更改一个div out

步骤1-获取查询参数值

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var parameter = getParameterByName('SourceCode');

步骤2-存储您的邮件

var messages = {
    hello: "Hi",
    goodbye: "Goodbye",
    default: "Who are You?"
}

步骤3-根据查询值更改消息

var changeMessage = function(queryValue) {
    var container = $('#container');
    container.html(messages[queryValue]);
}

这里有一把小提琴：

这里有一个基于@Phillip Chan的答案和你的JSFIDLE的例子

$（文档）.ready（函数（）{
函数getParameterByName（名称、url）{
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g，”）；
}
函数setContainerByParam（参数）{
//隐藏“容器”中的所有div
$（“#容器>div”）.hide（）；
//根据给定参数显示div
如果（参数==“你好”）{
$（“#你好”）.show（）；
}else if（参数==“再见”）{
$（“#再见”）.show（）；
}else if（参数==“whoAreYou”）{
$（“#再见”）.show（）；
}否则{
$（“#未知”）.show（）；
}
}
//尝试获取参数“SourceCode”并设置divs
var url_param=getParameterByName（'SourceCode'）；
setContainerByParam（url_参数）；
//尝试通过模拟不同的参数来设置div
setTimeout（函数（）{setContainerByParam（'hello'）；}，2000）；
setTimeout（函数（）{setContainerByParam（'拜拜'）；}，4000）；
setTimeout（函数（）{setContainerByParam（'whoAreYou'）；}，6000）；
});
#容器{宽度：100%高度：100px；背景：#000；}
#容器div{text align:center；color:pink；}

你好吗
回头见
走出
未知参数
您应该提供一些实际的JS/JQuery代码，以表明您自己在解决问题上付出了一些努力。然后你可以问如果你陷入困境如何解决一个特定的问题。这是一把小提琴这主要是结合了菲利普斯的答案和我最好的猜测菲利浦-我的JS知识是非常新手。我的最佳猜测是在if语句$（“#whoAreYou”）.hide（）中添加类似的内容$（“#再见”）.hide（）$（“#你好”）.show（）；但这对mecase敏感公司不起作用？你好vshello@Stormy我已经更新了我的答案。如果它是正确的，请考虑接受它作为正确的答案。我不确定我是否遗漏了什么，但我不能让它工作。这是一个链接，指向一个我正在尝试的网页。我在一个实际的网页上尝试了这个，但它不起作用。有什么想法吗？您没有包含JQuery库
-为了高效使用，您应该将库保存在服务器上并从那里包含它，但是为了进行测试，您可以使用此googleapis链接。我不确定为什么，但我无法在包含JQuery的情况下使其正常工作。不过我做了一些进一步的挖掘，发现了这个教程，它对我来说很有用，但我的缺点是，你必须将所有内容包装在$（document）.ready（function（）{…}）-但在您链接的站点上，已描述了这一点。原因是，在操作（显示/隐藏）元素之前，必须等待站点的HTML部分加载完毕。