3

私はこの質問に対する答えを書きました：URLによる新しい背景、私の答えに投稿したコードは、特定の文字列の存在についてURLをチェックし、存在する場合は、特定の要素の背景画像を変更することでした。

それで！私は私なので、jQueryを避けて、次のような従来のバニラ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()と、ループに入っていることが示され、コンソールは、DOMノード、画像オブジェクト、URL（関数に渡されたもの）への正確な参照があることを示します）そしてオブジェクトから正しい値を取得しています。iffor...in

ただし、el.style.backgroundImageプロパティを設定しようとする次の行は機能しません（これは、私が行った試みにのみリンクしているにもかかわらずmap[keyword]、をラップするかどうかに関係なく当てはまります。つまり、私の論理に明らかな欠陥がありますか？なぜ設定されていないのですか？encodeURIComponent()el.style.backgroundImage

（ちなみに、JSFiddleのJSLintは、それに満足しているようです（フォールバック/デフォルトを設定するために行われる既存の変数（urlおよび）の再定義を除く）。el

4

2 に答える 2

6

すでに引数として定義されているローカル変数urlを宣言しており、フォームも使用する必要があります。var urlurlurl(http:/xxxx)

これに変更します（URLのvar前に削除し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

backgroundImageURLは、でラップしない限り有効な値ではありませんurl()。

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

フィドル

また、encodeURIcomponentURL全体を使用しないでください。そうしないと、プロトコル:と/'がエンコードされ、404が相対URLとして解釈されます（プロトコルが不足しているため）。

GET http://fiddle.jshell.net/_display/http%3A%2F%2Fdavidrhysthomas.co.uk%2Fimg%2Fdexter.png 404（見つかりません）

代わりに、完全なURIをより安全にエンコードするには、次を使用できますencodeURI。

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

フィドル

注：encodeURI MDNは、GETリクエスト、つまりクエリ文字列を含むURLを使用するさまざまなブラウザでは期待どおりに機能しない可能性があると述べています。しかし、その問題を再現することはできませんでした。

また、@ jfriend00で示されているように、var前のキーワードは、正式なパラメーターurlとして宣言されているため、すでに関数スコープに属しているため、不要です。続きを読む：JavaScriptのスコープとホイスト

于 2012-10-21T19:28:27.350 に答える