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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Q&A

解決済

1回答

180閲覧

ブラウザサイズ変更で画像を変える方法が上手く行きません。

sakio6

総合スコア47

jQuery

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

0グッド

0クリップ

投稿2018/06/05 16:43

前提・実現したいこと

レスポンシブサイトを作成しております。
ブラウザのサイズを変えた時PC用とSP用の画像を入れ替えたいのですが、
上手く入れ替わってくれません。
画像ファイル格納先のディレクトリが異なっているため、
画像ファイル名を変えるのではなく、「pc」「sp」の
ディレクトリ名の変更を行いたいです。
画像ファイル名はPC・SP共通となります。

宜しくお願い致します。

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

1つの画像だけを指定した場合は、上手く画像が入れ替わりました。
ただ、2つ以上の画像に対して指定しますと、画像のファイル名が
全て同じ画像のものになってしまいます。
ブラウザの幅を変更すると、PCとSPの変更は出来ているのですが、
すべて同じ画像になってしまいます。

該当のソースコード

HTML

1<img src="images/pc/hogehoge01.jpg" alt="" class="img-sw" /> 2<img src="images/pc/hogehoge02.jpg" alt="" class="img-sw" /> 3<img src="images/pc/hogehoge03.jpg" alt="" class="img-sw" />

javascript

1 2$(function() { 3 4 var $elem = $('.img-sw'); 5 6 var sp = 'sp'; 7 var pc = 'pc'; 8 9 var replaceWidth = 750; 10 11 function imageSwitch() { 12 13 var windowWidth = parseInt($(window).width()); 14 15 16 $elem.each(function() { 17 var $this = $(this); 18 var imgSrc = $elem.attr('src').split('/'); 19 var changePc = $elem.attr('src').replace(imgSrc[1], pc); 20 var changeSp = $elem.attr('src').replace(imgSrc[1], sp); 21 22 if(windowWidth >= replaceWidth) { 23 $this.attr('src', changePc); 24 25 26 } else { 27 $this.attr('src', changeSp); 28 } 29 }); 30 } 31 imageSwitch(); 32 33 34 var resizeTimer; 35 $(window).on('resize', function() { 36 clearTimeout(resizeTimer); 37 resizeTimer = setTimeout(function() { 38 imageSwitch(); 39 }, 200); 40 }); 41});

試したこと

上記のように、色々なサイトを参考に画像パスの一部を変更するように
jQueryを書いてみましたが、もう少しの所のような気がするのですが、
完全に手詰まりになってしまいました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/05 23:26

ブラウザ開発ツールでコードの変化を追ってみては?もしかしたら想定通りの箇所を通っていない可能性があります。あと確認ですが、検証に同じ画像を使っているわけではありませんよね?
guest

回答1

0

ベストアンサー

確かにもう少しですね。

$elem.each(function() {
のループ内で$thisではなく$elemを利用しているのが原因です。
全て「$this」に修正すれば良さそうです。

js

1$elem.each(function() { 2 var $this = $(this); 3 var imgSrc = $this.attr('src').split('/'); 4 var changePc = $this.attr('src').replace(imgSrc[1], pc); 5 var changeSp = $this.attr('src').replace(imgSrc[1], sp); 6 7 if(windowWidth >= replaceWidth) { 8 $this.attr('src', changePc); 9 } else { 10 $this.attr('src', changeSp); 11 } 12});

投稿2018/06/06 00:17

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakio6

2018/06/06 02:19

mts10806様 先のご質問にお返事出来ず失礼致しました。 ご回答頂きましたように修正しましたら、無事 希望の動きが出来ました。 【$elem】での指定ですと、「img-sw」のクラスがついた画像それぞれではなく全体一括?の処理になっていたのですね。 大変助かりました。ありがとうございます。
m.ts10806

2018/06/06 02:21

そうですね。折角eachで回しているのに勿体無かったというところです。 ひとまず解決したようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問