質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16476questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5809questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

変数でJQueryのCSSメソッドに値を指定する際の不具合について

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 847
退会済みユーザー

退会済みユーザー

前提・実現したいこと

JQueryで、時間ごとに背景画像を変更するという実装を行っています。

該当のソースコード

    getTime = (new Date()).getHours();
    if(getTime >= 6 && getTime < 16){
        backImg = "images/img-background.jpg";
    } else if(getTime >= 16 && getTime < 6){
        backImg = "images/img-background02.jpg";     
    }
    $("#content-articles").css("background-image","url("+ backImg +")");

発生している問題・エラーメッセージ

getHoursで時間を取っていて、if文で分岐、backImgという変数に背景画像を入れているのですが、
最後の一文の

$("#content-articles").css("background-image","url("+ backImg +")");

ここのurlの後のbackImgがこれだと反映されるのですが、

$("#content-articles").css("background-image","url(backImg)");

これだと、backImgが変数として扱われないのです。
それがなぜなのかが分かりません。

色々調べてみて、文字列リテラルとか出てきたのですが、いまいち理解できませんでした。詳しく教えていただきたいです。

宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

これだと、backImgが変数として扱われないのです。
それがなぜなのかが分かりません。

むしろ見たままだと思いますが・・・
"url(backImg)"ですから「url(backImg)」という文字列ですよね?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/20 12:56

    あ、、、、理解できました、、、、(恥ずかしい)すみません。ありがとうございます。

    キャンセル

+1

前者で実際にcssメソッドに渡される文字列は"url(images/img-background.jpg)"ですが、後者は"url(backImg)"という文字列です。前者は正しく画像へのパスとなっていますが、後者はcssに「backImg」という文字列を渡してしまっているので、正しい画像のパスになっていません。cssにはJavaScriptの変数を参照する機能はないので、文字列として出来上がったものを渡してやらないと動作しません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

文字の部分をを変数として扱われると

もしそれが変数として扱われると、大変なことになります。
console.log()でinfomationと10回表示したいときに

for(var i = 0; n < 10; n++){
   console.log("infomation")
}


としますが、""で囲われた部分でもiが変数として扱われると

0fomat0on
1fomat1on
2fomat2on
...
と表示されるのです。
宣言された変数が含まれる文字列を扱えなくなってしまいます。
こうなるプログラミング言語を私は知りません。

解釈のされ方

""で囲われた部分が変数として扱われないのは言語仕様という他ありません。
ブラウザがどう解釈するかというと
"url("+ backImg +")" → 文字列+変数+文字列
"url(backImg)" → 文字列
となります。下の例では変数として解釈されません。

下のような挙動をするはずです。試してみてください。

var j = 130;

var i = "j"; // 文字列
console.log(i); // [j]

var i = j; // 変数
console.log(i); // [130]

var i = "j" + j; // 文字列+変数
console.log(i); // [j130]

リテラルとは

リテラルとは、ソースコード上に埋め込まれたデータのことです。
文字列リテラルとは、ソースコード上に文字列として解釈される書き方で書かれたリテラルです。

変数を""で囲っちゃいけないのは、文字列リテラルとして解釈されないようにするため。
変数の先頭を数値にしちゃいけないのは、数値リテラルとして解釈されないようにするため。
また、true/false、nullやundefinedなどを変数名として扱っちゃいけないのは、論理値リテラルや特殊なリテラルとして解釈されないようにするため。

こういったリテラルになるのを避けて変数名をつけるのは経験があるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    nicescroll.jsのscrollbarの上下に矢印アイコンの画像を付けたい

    実現したいことは、windowの右と下のスクロールバーの移動のするバーの右の場合はバーの上下に、下の移動バーには左右に矢印アイコンを設置したいのです。 現在、移動バーのみ表示

  • 解決済

    jQueryでトリミング

    jQueryで画像をトリミングしたいと考えています。見よう見真似でプログラムを作成したのですがトリミングした画像がどうしても出ないです。よろしければ、ご鞭撻のほどよろしくお願いしま

  • 解決済

    jQueryで絞り込みした<li>を生成

    あるいくつかの企画から「グループ」「場所」「ジャンル」で絞り込むコードを作成しようとしましたが、うまくいきませんでした。オブジェクトに格納されている値はconsole.log()使

  • 解決済

    リンク切れの画像の自動差し替え(imgタグ以外)

    リンク切れの画像をjsで自動で差し替えるようにしているのですが、 jQueryのflexsliderのサムネがimgタグでないためここだけ動きません。 <li data-t

  • 受付中

    適切なイベントがわからない。

    前提・実現したいこと imgタグで表示されているアイコンをクリックした後で、ポップアップされるdatepickerの表示崩れを修正したいです。 datepicker内のtabl

  • 解決済

    特定ファイル名の画像が存在するとき、別画像に置き換えたい。

    特定ファイル名の画像が存在するとき、別画像に置き換えたいです。 具体的には、「.hoge1」の背景画像が「img1.jpg」のときのみ「imgA.jpg」、「.hoge2」内

  • 解決済

    パララックスサイトの作り方

    jQueryで簡易的なパララックスサイトを作ってみましたが、うまくパララックスになりません。 修正点などあれば教えて頂けると幸いです。 このサイトを参考にした、というかそのまま

  • 受付中

    スマートフォンでパララックスを作ると背景が拡大してしまうのを解消したいです。

    現在パララックスサイトを制作しておりますが、スマートフォンで確認すると背景画像がスクロールした時にヘッダーとフッターが縮小することにより、背景に敷いている画像が拡大してしまいます。

同じタグがついた質問を見る

  • JavaScript

    16476questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5809questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。