PCレイアウト時にイベントをリセットしたい

Question

やりたいこと

レスポンシブ対応時にjQueryにて、スマホ時に実行したイベントをPCレイアウト時に削除したいと思っております。

試してみたソースコード

var sp_flag = false;
var pc_flag = false;
// リサイズ時に取得
$( window ).on( 'load resize', function() {
  sp_flag = ( window.matchMedia( '(max-width:768px)' ).matches ); // IE10+
} );
$( window ).on( 'load resize', function() {
  pc_flag = ( window.matchMedia( '(min-width:769px)' ).matches ); // IE10+
} );
$(".a > li").on("click", function() {
  // クリック時に判断
  if ( sp_flag ) {
    $(this).next().slideToggle();
    $(this).toggleClass("is-active");
    $(this).closest(".X").toggleClass("is-active");
  }
});
$(function(){
  if ( pc_flag ) {
   $(".b *").removeAttr('style');
  }
});

上記のコードはこちらの質問を参考にさせていただきました。
https://teratail.com/questions/43593

問題となっているところ

横幅769px以上のPCレイアウト時に、SPレイアウト時に実行したJSイベントがリセットされません。

実現したいこと

PC時にSPレイアウト時に実行したJSイベントをリセットしたいです。

教えてほしいこと

スクリプトによってHTMLに書き加えたstyle属性を削除できれば意図した動きになるため、削除しようとremoveAttrメソッドを使用したのですがうまくいかず、このメソッドの使い方を間違えているのか知りたいです。また、スマホレイアウト時に実行したイベント毎、PC時にはリセットするという方法が「実行したイベント リセット js」などで検索しても見つけられず、リセット方法がもしありましたら教えていただきたいです。

どなたかアドバイスいただけますと助かります。
よろしくお願い申し上げます。

追記（12.19）

一応スマートなコードではありませんが、実装したい動きはできました。

var sp_flag = false;
var pc_flag = false;
// リサイズ時に取得
$( window ).on( 'load resize', function() {
  sp_flag = ( window.matchMedia( '(max-width:768px)' ).matches ); // IE10+
} );
$( window ).on( 'load resize', function() {
  pc_flag = ( window.matchMedia( '(min-width:769px)' ).matches ); // IE10+
} );
$(".a > li").on("click", function() {
  // クリック時に判断
  if ( sp_flag ) {
    $(this).next().slideToggle();
    $(this).toggleClass("is-active");
    $(this).closest(".X").toggleClass("is-active");
  }
});
$(window).resize( function() { ←追加
  if ( pc_flag ) {
   $(".b *").removeAttr('style');
  }
});

$(window).resize( function() {
  if ( pc_flag) {}
});

ただこちらのコードですと、resize functionを２重で読み込みしており、現状の書き方に問題点がありそうな気がしております。もし何かお気づきの点がありましたら、ご指摘いただきたいです。

何度も申し訳ございませんが、どなたかアドバイスいただけますと幸いです。
よろしくお願い申し上げます。

Comments

[Lhankor_Mhy]

『削除しようとremoveAttrメソッドを使用したのですがうまくいかず』とのことですが、具体的にはどのようなことが起きていますか？

[Yui_note]

ありがとうございます。
具体的な状態ですが、ブラウザ幅を768px以下にした際のJSは問題なく実行されますが、ブラウザ幅を769px以上にリサイズにした際にそのSP時に実行し吐き出されたイベントがリセットされない状態です。SP時はクリックイベントでslideToggleでインラインスタイルにdisplay: blockとnoneが発生しているのですが、そのイベントがブラウザ幅769px以上の場合にはリセットされた状態にしたいと思っています。

[Lhankor_Mhy]

「イベントがリセットされない状態」というのは、クリックしても何も起きないようにしたい、ということでいいですか？

[Yui_note]

いえ、SP時にクリック動作で実行されたイベント（インラインにスタイルが追加されます）を、ブラウザ幅を768px以上にリサイズした際にそのイベント一式をリセットしたいという形になります。
先ほど追記記載させていただきましたが、一旦動き自体は実装はできました。
ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

>resize functionを２重で読み込みしており、現状の書き方に問題点がありそうな気が

MediaQueryListのchangeイベントを使った方が、スッキリするかもしれないですね。
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

Answer 1

同じイベントハンドラを繰り返す必要はありませんので、以下のようにまとめたらスッキリします。

$( window ).on( 'load resize', function() {
  sp_flag = ( window.matchMedia( '(max-width:768px)' ).matches ); // IE10+
  pc_flag = ( window.matchMedia( '(min-width:769px)' ).matches ); // IE10+
  if ( pc_flag ) {
   $(".b *").removeAttr('style');
  }
} );

あと、ついでに申し上げると、if ( sp_flag ) {...}のところで$(this)が繰り返し使われていますが、

    let $this = $(this);
    $this.next().slideToggle();
    $this.toggleClass("is-active");
    $this.closest(".X").toggleClass("is-active");

のように一旦変数に格納してそれを使うことで若干ですが処理が速くなります。もっと大規模なものでないと体感できないとは思いますが、習慣づけておくことをお勧めします。