基于 URL 查询的后台切换答案

【问题标题】：Background switch based on URL query基于 URL 查询的后台切换
【发布时间】：2014-10-25 00:28:36
【问题描述】：

所以我希望根据 URL 换出背景图像，在这种情况下，它将基于用户的目的地。我有很多背景图片，需要根据 url 字符串显示正确的背景。例如，如果 URL 是这样的：

有一个与查询“ord”相关联的背景图像。

由于我有很多车站代码（即“ord”、“lax”等）和很多图像，我想创建一个函数，它可以根据车站代码显示正确的图像。

我的图像简单命名为：“dest-a”、“dest-b”等。这就是我目前所拥有的（假设 if/else 语句有效 - 我没有在本示例中添加该代码）：

var stationCodes = /abq|abr|aby|ack|aex|ags|alb|anc|apn|atl|atw|aus|avl| ......
var bgPath = 'static/4.0/img/backgrounds/';
    var bgImgs = {
        //SLC Region
            bzn: 'dest-a',
            cos: 'dest-a',
            den: 'dest-a',
            slc: 'dest-a',
        //Desert Pacific NW Region
            abq: 'dest-b'
        };

            var bgSwap = bgPath + bgImgs[DEST] + '.jpg';

            if(DEVICE !== 'mobile'){
                if( stationCodes.test(DEST)) {
                    $('#container-mainContent').css('background-image', 'url('+ bgSwap +')');
                }
                else {
                    $('#container-mainContent').css('background-image', 'url('+ bgPath + 'dest-p.jpg)');
                }
        }

我想摆脱'var bgImgs'单独添加站代码然后根据目的地添加适当背景图像的方法，因为它会变得非常多余。如何创建一个函数，它将根据具有站代码的 URL 查询正确交换背景图像？

【问题讨论】：

标签： javascript jquery css image

【解决方案1】：

function setBackgroundImage (stationCode) {

    var path = "static/4.0/img/backgrounds/";
    var image = null;

    switch (stationCode) {
        case "bzn":
        case "cos":
        case "den":
        case "slc":
            image = "dest-a.jpg";
            break;
        case "abq":
            image = "dest-b.jpg";
            break;

        /* More cases here... */

        default:
            image = "dest-p.jpg";
            break;
    }

    var backgroundString = "url(" + path + image + ")";
    document.getElementById("container-mainContent").style.backgroundImage = backgroundString;
}

【讨论】：