Question

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

有一个与查询＆＃39; ord＆＃39;。

相关联的背景图片

由于我有很多站点码（即＆＃39; ord＆＃39;，＆＃39; lax＆＃39;等）和很多图像，我想创建一个功能，它显示了根据电台代码纠正图像。

我的图片简称为：＆＃39; dest-a＆＃39;，＆＃39; dest-b＆＃39;等等。这是我到目前为止（假设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)');
                }
        }

我想摆脱＆＃39; var bgImgs＆＃39;单独添加站代码然后根据目的地添加适当的背景图像的方法，因为它将变得非常冗余。如何创建一个函数，它将根据具有电台代码的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;
}

基于URL查询的后台切换

1 个答案: