javascript - 基于URL查询的后台切换

Question

因此，我希望根据 URL 换出背景图像，在本例中，该 URL 将基于用户的目的地。我有很多背景图片，需要根据 url 字符串显示正确的背景。例如，如果 URL 是这样的:

http://fakeUrl.net?dest=ord

有一张与查询“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 查询正确交换背景图像？

Answer 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;
}