基于URL查询的后台切换

Background switch based on URL query

本文关键字：后台 URL 查询 基于      更新时间：2023-09-26

所以我想交换基于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查询正确交换背景图像？

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;
}
相关文章：