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

Question

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

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

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

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

<p>色を表示<p>

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

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

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

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

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

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

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

Answer 1

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

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

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

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

Comments

[umauman]

ご回答いただきましてありがとうございます。

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

そんなに簡単なことでは無いのですね。
「元に戻す」方法を調べてみたところ元の状態を記憶させておくことが必要な旨が出てきて今の私のレベルでは難しそうでした…（悲）

記述の仕方が大変勉強になりました。
とてもシンプルになるので今後ぜひ活用するようにしていきたいと思います。

ちなみに今回のケースだと下記の様に空にすることで実現できますね。
この方法は邪道だったりするのでしょうか…

$('p').css('color', matching ? 'red' : '');

再度、ありがとうございました。