Question

我想要实现的目标是根据＆＃34;？HELLO＆＃34;等内容显示不同的消息。被附加到页面的URL上。出于这个问题的目的，页面内容可能就像这样简单：

<!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>

另外，我有兴趣知道如何使用单个div并通过ID获取元素。我不确定哪种方式最终对我有用。我可能想要根据链接或图像等参数添加其他元素。我的一个客户有一个电子商务网站，并正在考虑为那些登陆网站的客户实施类似这样的事情，这些客户看起来像是＃34; SourceCode = HELLO＆＃34;但我假设一个字符串是一个字符串。

这是一个小提琴，虽然我认为它不会有助于测试网址jsfiddle.net/stormbloom/caqfxx46

Answer 1

<强> 更新

我更新了包含实施的答案。您似乎真的只想根据查询字符串的值更改消息传递。最好以可扩展的方式存储您的消息，然后只更改一个div。

第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]);
}

这是一个小提琴：https://jsfiddle.net/wf2x6yua/2/

Answer 2

这是一个基于@Phillip Chan的答案和你的jsfiddle的例子。

＆＃13;

 $(document).ready(function() {

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, " "));
}

function setContainerByParam(parameter) {
    // hide all divs inside "container"
    $("#container > div").hide();
    // show divs, based on the given parameter
    if (parameter === "hello") {
        $("#hello").show();
    } else if (parameter === "goodbye") {
     	$("#goodbye").show();
    } else if (parameter === "whoAreYou") {
        $("#goodbye").show();
    } else {
     	$("#unknown").show();
    }
}

// try to get param "SourceCode" and set divs
var url_param = getParameterByName('SourceCode');
setContainerByParam(url_param);

// try to set divs by simulating different parameters
setTimeout(function(){ setContainerByParam('hello'); }, 2000);
setTimeout(function(){ setContainerByParam('goodbye'); }, 4000);
setTimeout(function(){ setContainerByParam('whoAreYou'); }, 6000);

});

＆＃13;

#container {width:100%height:100px;background:#000;}
#container div {text-align:center;color:pink;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
    <div id="hello">How are you</div>
    <div id="goodbye">See you later</div>
    <div id="whoAreYou">Get Out</div>
    <div id="unknown">unknown parameter</div>
</div>

＆＃13;

如何根据引入的URL参数创建一个可以显示div的多个版本的HTML页面

2 个答案: