Q&A
提示のコードはエラーが出ます。実際に試されたコードを提示してください。
jQuery 3のresizeの挙動がloadになる
今Webページを作っているのですが、リスポンシブデザインを実装しようとした時に、問題に直面しました。
cssを書き換えるだけではなくて、テキスト自体を画素数に応じて書き換えたかったためjQueryを使って実装しようとしたのですが、$(window).on("resize", () => {...});の挙動が、resizeではなくloadになります。
ウィンドウの更新を押した際はうまく動くのですが、ウィンドウの拡大縮小をした時にはなぜか動きません。
この問題にぶち当たったため、テストファイルを作って解像度に応じて背景色を変えるようコーディングしたのですが、resizeとしているのにやはりloadの挙動になります。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body> <div id="test"> <p style="font-size: 30px; font-weight: bold; display: block; text-align: center; padding: 50px;">テスト</p> </div> <script> (function($){ const $win = $(window); const $winW = $win.innerWidth(); $win.on('load resize',() =>{ if ($winW > 1460) { $('#test p').css('background-color','red'); } else if ($winW > 1280) { $('#test p').css('background-color','yellow'); } else if ($winW > 960) { $('#test p').css('background-color','orange'); } else if ($winW > 600) { $('#test p').css('background-color','green'); } else if ($winW > 480) { $('#test p').css('background-color','blue'); } else { $('#test p').css('background-color','pink'); } }); })(jQuery); </script> </body> </html>
試したこと
'resize'を'load'と'load resize'に書き換える、
constのスコープの確認など
補足情報（FW/ツールのバージョンなど）
jQuery 3.3.1
私の環境だけかわからないですが、そもそもこのコード、jQueryのReferenceErrorでませんか？
コードを貼りなおしました。変わっているところはscriptタグの $bgColorを定義しているところのresizeが'load resize'になっているだけです。再度html上で動作テストをしてみましたが、今度はloadされたときには指定のcssが適用される一方で、リサイズに反応しません。根本的に、このコードで「画面幅に応じて背景色を変える」という動的なことが、テスト段階で一度もうまく機能していないのですが、私の知識不足もあり原因が分からなくて困っています。
エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error
すみません。関数定義の部分でエラーをはいていたのでその定義を削除したものをまた貼りなおしました。現在の挙動は、ロード時にはcssが反映されますが、リサイズに反応しません。
回答コメントに書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを質問文に追記してください。（決して元のコードを消さないでください）（2回投稿になってしまいすみません、上のコメントは削除依頼済みです）
.
最終的に動いたコード：https://jsfiddle.net/8Lau6ojr/
letを使うverコード：https://jsfiddle.net/kwLu1ayz/
私が試していた(?)コード：https://jsfiddle.net/1da8zem2/
回答2件
0
下記がそもそもdocument.readyのときしか拾えていません。
js
1const $winW = $win.innerWidth();
下記の箇所にconsole.log()を仕掛けてみるとわかりますが、
ずっと画面表示時の値を保持していますよね？
js
1 $win.on('load resize',() =>{ 2 console.log($winW);
例えば下記のようにして、resize時にも取得するようにされては？
js
1 (function ($) { 2 const $win = $(window); 3 let $winW = $win.innerWidth();//constでは定数なので定義の形式を変更 4 $win.on('load resize', () => { 5 $winW = $win.innerWidth();//常にその時の値を取得する 6 if ($winW > 1460) { 7 $('#test p').css('background-color', 'red'); 8 } else if ($winW > 1280) { 9 $('#test p').css('background-color', 'yellow'); 10 } else if ($winW > 960) { 11 $('#test p').css('background-color', 'orange'); 12 } else if ($winW > 600) { 13 $('#test p').css('background-color', 'green'); 14 } else if ($winW > 480) { 15 $('#test p').css('background-color', 'blue'); 16 } else { 17 $('#test p').css('background-color', 'pink'); 18 } 19 }); 20 })(jQuery);
投稿2019/02/03 14:34
編集2019/02/03 14:37総合スコア80850
回答ありがとうございます。ご指摘頂いた点は「ああ、」と思いました。
しかし$winWを変数定義にしても未だにリサイズに応じて背景色が変わらないのですが、画面幅が変わったのを検知をするには$(window).on('resize', () => {...});以外にも何か記述する必要があるのでしょうか。
To: Dr4goniezさん
動くサンプル： https://jsfiddle.net/d6po0f5g/
変わりますよ。デベロッパーツールでエラーが出ていないか確認してください。
確かに、jsfiddle上だときれいに動作していますね。最新バージョンのchromeで挙動をテストしていたのですが、こちらでは未だにloadだけうまく機能してresizeに反応しません。理由が分かれば教えて頂けると助かります(._.)
To: Dr4goniezさん
デベロッパーツールでエラーが出ていないか確認してください。
出ていません...
あれおかしいな。そのまま動くコードのはずですが
0
自己解決
すみません、chrome上で動かなくてjsfiddle上で動いたのは、私がテストしていたコードでは$winWの定義が//元位置の位置にあるためでした。
以下のコードに書き直したところ、kei344さんのご助言どうり、きれいに動作しました。
また、onメソッドの上でlet(/var)を使って変数定義をした場合、resizeはうまく動作しませんでした。
皆さん、ご回答ありがとうございました。
jQuery
1(function($){ 2 3 const $w = $(window); 4 //元位置 5 $w.on('load resize', ()=> { 6 const $winW = $w.innerWidth(); //変更後 7 if ($winW > 1460) { 8 $('#test p').css('background-color','red'); 9 } else if ($winW > 1280) { 10 $('#test p').css('background-color','yellow'); 11 } else if ($winW > 960) { 12 $('#test p').css('background-color','orange'); 13 } else if ($winW > 600) { 14 $('#test p').css('background-color','green'); 15 } else if ($winW > 480) { 16 $('#test p').css('background-color','blue'); 17 } else { 18 $('#test p').css('background-color','pink'); 19 } 20 }); 21 22})(jQuery);
投稿2019/02/03 17:10
編集2019/02/03 17:12総合スコア12
スコープでごまかされてますけど本来constで定義する変数ではないとは私としては思います。
※それに私が提示したコードは動作確認したものなので、そのままで「動かない」はずはないです。
申し訳ありません。おそらく、関数内で$(window).innerWidth();を代入した変数に再代入する行が抜けていたのかもしれません。
回答頂いたコード：https://jsfiddle.net/kwLu1ayz/
私が試した(?)コード：https://jsfiddle.net/1da8zem2/
letを使わないバージョン：https://jsfiddle.net/8Lau6ojr/
あなたの回答
tips
プレビュー
