Question

我目前在网址中使用查询字符串来表示产品选择。我使用此功能将产品选项显示在隐藏文本框中，该文本框将提交到我们的网站：

function getQueryVariable(key) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (decodeURIComponent(pair[0])== key) {
            return decodeURIComponent(pair[1]);
        }
    }
}

var product = getQueryVariable('product');
document.getElementById("00NK0000000Yqv2").value = product;

我还需要根据URL查询字符串中指示的产品显示标题图像。我有四种产品（制造，建筑，专业和一般）。

如何设置，以便如果网址如下：www.foo.com?product=Construction显示构造标题或www.foo.com?product=Manufacturing，则会显示制造。

Answer 1

您可以像这样更改图像的来源：

document.getElementById("headerImg").src = 'header' + product + '.jpg';

图像具有相同的ID，如下所示：

<img id="headerImg" src="images/headerImg.jpg">

Answer 2

您可以将元素的css类更改为产品名称，并将CSS中的背景图像换出。例如，如果你的header元素有一个id = header，那么使用jquery会看起来像这样。

$（ '＃头'）addClass（产品）。 //产品是你的变量

然后在CSS中，您可以将其设置为：

#header {background-image：url（pathToDefaultImage）}

＃header.Manufacturing {background-image：url（pathToManufacturingImage）}

Answer 3

是的，您可以采用与设置value相同的方式执行此操作 - 根据您的查询变量设置图片的src属性。

类似的东西：

var image;
if (product === 'Construction') image = 'your_construction_image.png';
// more cases

document.getElementById('yourimageID').src = image;

然而，更好的方法是使用服务器端语言呈现所需的HTML，而不是使用JavaScript后设置它。

根据URL中的变量/键显示不同的图像

3 个答案: