3

我为这个问题写了一个答案：根据 url 的新背景，我在答案中发布的代码是检查 URL 是否存在特定字符串，如果存在，则更改给定元素的背景图像。

所以！我是我，我想我会尝试避免使用 jQuery，并使用以下更传统的 vanilla JavaScript 方法：

var images = {
    'halloween' : '/images/newbackground.jpg',
    'christmas' : '/images/xmasbackground.jpg'
};

var url = document.location.href,
    elem = document.getElementById('elementThatYouWantToStyle');

for (var keyword in images){
    if (images.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
        elem.style.backgroundImage = images[keyword];
    }
}

来源。

然后我认为我会转换为功能方法，所以它变成了这样：

var images = {
    'halloween': 'http://davidrhysthomas.co.uk/img/dexter.png',
    'christmas': 'http://davidrhysthomas.co.uk/img/mandark.png'
};

function setBG(el, map, url) {
    if (!el || !map) {
        return false;
    }
    else {
        var url = url || document.location.href,
            el = el.nodeType == 1 ? el : document.getElementById(el);
        for (var keyword in map) {
            if (map.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
                el.style.backgroundImage = encodeURIComponent(map[keyword]);
            }
        }
    }
}

setBG('one', images, 'http://some.domain.com/with/halloween.jpg');
setBG(document.getElementById('two'), images, 'http://some.domain.com/with/christmas.jpg');

JS 小提琴演示。

现在，如果我在循环内console.log()的if评估中添加一个，for...in它表明我们正在进入循环，并且控制台表明我对 DOM 节点、图像对象、URL 有一个准确的引用（传递给函数) 并且正在从对象中获取正确的值。

但是，我尝试设置el.style.backgroundImage属性的以下行不起作用（无论我是否将我的逻辑明显缺陷？为什么不被设置？map[keyword]encodeURIComponent()el.style.backgroundImage

（顺便说一句，JS Fiddle 的 JS Lint似乎对此很满意（除了重新定义现有变量 (url和el) 以实现回退/默认）。

4

2 回答 2

6

您正在声明一个已定义为参数的局部变量url，并且您还需要使用.var urlurlurl(http:/xxxx)

更改为此（var在 url 前面删除url并添加url()周围的 url）：

function setBG(el, map, url) {
    if (!el || !map) {
        return false;
    }
    else {
        url = url || document.location.href;
        el = el.nodeType == 1 ? el : document.getElementById(el);
        for (var keyword in map) {
            if (map.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
                el.style.backgroundImage = 'url(' + map[keyword] + ')';
            }
        }
    }
}
于 2012-10-21T19:28:49.587 回答
5

除非您将URLbackgroundImage包装在url().

el.style.backgroundImage = 'url(' + map[keyword] + ')';

小提琴

此外，您不应该encodeURIcomponent使用整个 URL，否则它甚至会对协议:和/'s 进行编码，从而导致 404（由于现在缺少协议）被解释为相对 URL：

获取http://fiddle.jshell.net/_display/http%3A%2F%2Fdavidrhysthomas.co.uk%2Fimg%2Fdexter.png 404（未找到）

相反，为了更安全地编码完整的 URI，您可以使用encodeURI：

el.style.backgroundImage = 'url("' + encodeURI(map[keyword]) + '")';

小提琴

注意： MDN 提到，encodeURI在不同的浏览器中可能无法按预期使用 GET 请求，即包含查询字符串的 URL。我无法重现该问题。

同样正如@jfriend00 所指出的，var关键字 beforeurl是不必要的，因为它已经属于函数范围，因为它被声明为正式参数。阅读更多：JavaScript 作用域和提升

于 2012-10-21T19:28:27.350 回答