jQueryで背景画像を変更したい。

質問

ブロック要素がありまして（下記<div id="box">boxの中身</div>）
そのブロック要素の背景画像(背景は動的に生成)を
別の画像に変えたいと思っています。
※現行のPCサイトのHTMLをいじらずに、スマホ対応しています

背景画像としては、

現在の背景画像⇒haikei.jpg
新しい背景画像⇒haikei_smp.jpg

↑こんな感じで
ファイル名の「haikei」の部分は動的に生成しているため可変ですが、
もとの画像に「_smp」が付く画像ファイルを用意して、
対応したい考えています。

特にイベントはなく、loadしたら読み込む予定でいて
以下のように書いたのですが、
PC上のシミュレーターではうまくいくものの、
実際のスマートフォンで確認したら実行できませんでした。
PC上ではエラーもなかったのですが、
背景画像が変わらないといった不具合です。

HTML
----------------------
<div id="box">boxの中身</div>

js
-----------------------
$(function(){
　//mainbgに現在の背景画像を格納
　var mainbg = $("#box").css("background-image")

　//mainbgを(".")で分割し、bgImgに格納
　bgImg = mainbg.split(".");

　var img01 = bgImg[0];
　var img02 = bgImg[1];

　//「_smp」を付与し、smp_mainbgに格納
　var smp_mainbg = img01 + "_smp." + img02 ;

　//jQueryでbackground-imageを変更操作
　$("#box").css("background-image" , smp_mainbg);
});

そもそも、この書き方がよいのか分かりませんが
もっとスマートの書き方がありましたら
別の方法でも、どうかご教授ください。

どうぞ宜しくお願いいたします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

>splitでは、途中に'.'が存在すると、うまくいかないこともあるんですね。
>そっか、indexOfを使えばいいんですね。
>勉強になります。

相対パスであれば画像の拡張子以外に'.'が入ることはほとんど無いと思いますが、URLの場合はドメインに必ず入ってきますのでその数が固定であればsplitかけて、後ろから見ていけばわかると思います。
単純に0と1要素で見ると、ドメインの.で区切られた文字になると思います。

今回は最後の'.'が画像の拡張子前ときめうちでの処理です。

＊私のandroid端末では動作確認しています。

お礼

LancerVIIさん

再解説ありがとうございます。

動作確認しました～
iosとandroid端末で期待通りできました。
毎度のことながら助かりました。

jQuery、知れば知るほど楽しいです。
今後も頑張ります。

また質問してしまう事が多々あるとは思いますが
今後もどうぞ宜しくお願いします。

本当に本当にありがとうございました。

回答No.1

LancerVII

こんにちは。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7372330/

実際動かすと動かないのはおそらく
var mainbg = $("#box").css("background-image")
で取得したものが絶対パスになっているからだと思います。
取得したmainbgを見てみるとurl('http://xxx.xxx/xxx.png')とかになっていると思います。
(途中に'.'が存在するとファイル名以外のところでもsplitされるため)

なので以下のようにしてみました。

$().ready ( function() {

var mainbg = $('#box').css ( 'background-image' );
// 最後の.より前をv1へ
var v1 = mainbg.substring(0,mainbg.lastIndexOf('.') );
// 最後の.より後ろをv2へ
var v2 = mainbg.substring(mainbg.lastIndexOf('.') );
// 間に_smpを挿入したものをファイルパスとして与える
$('#box').css ( 'background-image' , v1 + '_smp' + v2 );

});

お礼

LancerVIIさん

今回もお世話になりました！
相変わらずの親切な解説とサンプル＆素早い回答を
ありがとうございます。

splitでは、途中に'.'が存在すると、うまくいかないこともあるんですね。
そっか、indexOfを使えばいいんですね。
勉強になります。

それで、実装してみて、
PC上のスマホシミュレーターでは期待通りにできました。
ですが、スマホの実機でまだ確認できていないのです。

まずは、取り急ぎ御礼したいと思いペンをとりました。

本当に本当にありがとうございました。