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

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

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

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

jQuery

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

Q&A

解決済

1回答

6648閲覧

【jQuery】「レスポンシブ」リロード無しでスマートフォン幅でのみ処理をさせたい

umauman

総合スコア57

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2017/03/15 09:01

編集2017/03/15 09:02

前回の質問で記述を欲張り過ぎたのでソースを単純にし、少し方向性も変更いたしました。
【前回の質問】https://teratail.com/questions/69094
(読んでいただく必要は無いかもしれませんが参考まで)
###実現したいこと
レスポンシブサイトを作っています。
ウィンドウ幅を変化させた時にリロード無しで下記の処理をしたく思っています。

スマートフォンサイズ(767px以下):文字を「」にしたい。
PCサイズ(768px以上):何も処理をさせたくない

※上記のような例の場合はCSSのメディアクエリを使用すればすぐにできるのですが、実際はもう少し複雑な処理をしたく思っています。

###試したこと①
下記ですと、「①PC幅→②スマートフォン幅→③PC幅」に変化させた場合、③の時点でテキストは「赤」のままで解除されません。

html

1<p>色を表示<p>

javascript

1$(window).on('load resize', function(){ 2if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン 3 $('p').css('color','red'); 4} 5});

###試したこと②
下記のように「else」を加えた場合は、PC幅で文字が「青」、スマートフォン幅で「赤」と切り替わります。

javascript

1$(window).on('load resize', function(){ 2if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン 3 $('p').css('color','red'); 4}else{//PC 5 $('p').css('color','blue'); 6} 7});

ただ、「試したこと②」とは異なり、PC幅では何も処理をしたくないのですが、これを、実現する記述方法はありますでしょうか?
必ず同一のセレクタを「else」にも加えて「セット」で記述をする必要があるのでしょうか?

もしくは何も処理をしない、という記述の仕方は存在しますでしょうか?(下記の様なイメージです)

javascript

1$(window).on('load resize', function(){ 2if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン 3 $('p').css('color','red'); 4}else{//PC 5 $('p') //←何も処理をしないという記述の方法はありますでしょうか? 6} 7});

一通り「matchMedia」を使った条件分岐について調べてみたものの、必ず「else」があり、「if」で指定したものと同じセレクタとセットで条件分岐処理をしているものばかりで答えに辿り着けません。
もし他に記述の方法がございましたらご教授いただけないでしょうか?
なにとぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

PC幅では何も処理をしたくないのですが

メディアクエリを使って自動切り替えするのでもない限り、元に戻す処理が必要になります。

ただ、この例では、簡易的にこんな書き方もできます。

javascript

1$(window).on('load resize', function(){ 2 var matching = window.matchMedia('(max-width:767px)').matches; 3 $('p').css('color', matching ? 'red' : 'blue'); 4});

投稿2017/03/15 09:12

maisumakun

総合スコア145121

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

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

umauman

2017/03/15 13:02

ご回答いただきましてありがとうございます。 >メディアクエリを使って自動切り替えするのでもない限り、 >元に戻す処理が必要になります。 そんなに簡単なことでは無いのですね。 「元に戻す」方法を調べてみたところ元の状態を記憶させておくことが必要な旨が出てきて今の私のレベルでは難しそうでした…(悲) 記述の仕方が大変勉強になりました。 とてもシンプルになるので今後ぜひ活用するようにしていきたいと思います。 ちなみに今回のケースだと下記の様に空にすることで実現できますね。 この方法は邪道だったりするのでしょうか… $('p').css('color', matching ? 'red' : ''); 再度、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問