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

Question

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

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 查询字符串中指示的产品显示标题图像。我有四种产品(制造、建筑、专业和一般)。

如果 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">