質問編集履歴

7

ごじ

2020/12/19 01:24

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -96,7 +96,7 @@
96
96
 
97
97
  var pc_flag = false;
98
98
 
99
- // リサイズ時に取得しておいて、
99
+ // リサイズ時に取得
100
100
 
101
101
  $( window ).on( 'load resize', function() {
102
102
 
@@ -110,31 +110,29 @@
110
110
 
111
111
  } );
112
112
 
113
- $(".p-price-grid > .p-price-grid__title").on("click", function() {
113
+ $(".a > li").on("click", function() {
114
114
 
115
- // クリック時に判断すれば良いと思います。
115
+ // クリック時に判断
116
116
 
117
117
  if ( sp_flag ) {
118
118
 
119
- $(this).next().slideToggle(170);
119
+ $(this).next().slideToggle();
120
120
 
121
121
  $(this).toggleClass("is-active");
122
122
 
123
- $(this).closest(".p-price-grid").toggleClass("is-active");
123
+ $(this).closest(".X").toggleClass("is-active");
124
124
 
125
125
  }
126
126
 
127
127
  });
128
128
 
129
+ $(window).resize( function() { ←追加
129
130
 
131
+ if ( pc_flag ) {
130
132
 
131
- $(window).resize( function() { ←追加
133
+ $(".b *").removeAttr('style');
132
134
 
133
- if ( pc_flag) {
134
-
135
- $(".p-price-grid__content").removeAttr('style');
136
-
137
- }
135
+ }
138
136
 
139
137
  });
140
138
 

6

ごじ

2020/12/19 01:24

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- ただこちらのコードですと、resize functionを2重で読み込みしており、現状の書き方でもし問題点がありそうな気がしております。もし何かお気づきの点がありましたら、ご指摘いただきたいです。
157
+ ただこちらのコードですと、resize functionを2重で読み込みしており、現状の書き方問題点がありそうな気がしております。もし何かお気づきの点がありましたら、ご指摘いただきたいです。
158
158
 
159
159
 
160
160
 

5

文法の修正

2020/12/19 01:23

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- ただこちらのコードですと、resize functionを2重で読み込みしており、もう少しスマートな書き方がないか知りたく思っております。
157
+ ただこちらのコードですと、resize functionを2重で読み込みしており、現状の書き方でもし問題点ありそう気がしております。もし何かお気づきの点がありましたら、ご指摘いただきたいです。
158
158
 
159
159
 
160
160
 

4

誤字

2020/12/19 01:23

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- ただこちらのコードと、resize functionを2重で読み込みしており、もう少しスマートな書き方がないか知りたく思っております。
157
+ ただこちらのコードですと、resize functionを2重で読み込みしており、もう少しスマートな書き方がないか知りたく思っております。
158
158
 
159
159
 
160
160
 

3

追記

2020/12/19 01:18

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -83,3 +83,81 @@
83
83
  どなたかアドバイスいただけますと助かります。
84
84
 
85
85
  よろしくお願い申し上げます。
86
+
87
+
88
+
89
+ ### 追記(12.19)
90
+
91
+ 一応スマートなコードではありませんが、実装したい動きはできました。
92
+
93
+ ```JS
94
+
95
+ var sp_flag = false;
96
+
97
+ var pc_flag = false;
98
+
99
+ // リサイズ時に取得しておいて、
100
+
101
+ $( window ).on( 'load resize', function() {
102
+
103
+ sp_flag = ( window.matchMedia( '(max-width:768px)' ).matches ); // IE10+
104
+
105
+ } );
106
+
107
+ $( window ).on( 'load resize', function() {
108
+
109
+ pc_flag = ( window.matchMedia( '(min-width:769px)' ).matches ); // IE10+
110
+
111
+ } );
112
+
113
+ $(".p-price-grid > .p-price-grid__title").on("click", function() {
114
+
115
+ // クリック時に判断すれば良いと思います。
116
+
117
+ if ( sp_flag ) {
118
+
119
+ $(this).next().slideToggle(170);
120
+
121
+ $(this).toggleClass("is-active");
122
+
123
+ $(this).closest(".p-price-grid").toggleClass("is-active");
124
+
125
+ }
126
+
127
+ });
128
+
129
+
130
+
131
+ $(window).resize( function() { ←追加
132
+
133
+ if ( pc_flag) {
134
+
135
+ $(".p-price-grid__content").removeAttr('style');
136
+
137
+ }
138
+
139
+ });
140
+
141
+ ```
142
+
143
+
144
+
145
+ ```JS
146
+
147
+ $(window).resize( function() {
148
+
149
+ if ( pc_flag) {}
150
+
151
+ });
152
+
153
+ ```
154
+
155
+
156
+
157
+ ただこちらのコードだと、resize functionを2重で読み込みしており、もう少しスマートな書き方がないか知りたく思っております。
158
+
159
+
160
+
161
+ 何度も申し訳ございませんが、どなたかアドバイスいただけますと幸いです。
162
+
163
+ よろしくお願い申し上げます。

2

誤字

2020/12/19 01:17

投稿

Yui_note
Yui_note

スコア15

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

1

書き方修正

2020/12/18 02:57

投稿

Yui_note
Yui_note

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,10 @@
1
+ ### やりたいこと
2
+
1
3
  レスポンシブ対応時にjQueryにて、スマホ時に実行したイベントをPCレイアウト時に削除したいと思っております。
2
4
 
3
5
 
4
6
 
5
- スマホ時に要素にslidetoggleでイベントを実行しておりますが、実行時に発生したイベントをPC時に削除orリセットすることができません。
6
-
7
-
8
-
9
- 以下のコードを試してみましが、うまくいきませんでした。
7
+ ### 試してみたソースコード
10
-
11
-
12
8
 
13
9
  ```JS
14
10
 
@@ -50,7 +46,7 @@
50
46
 
51
47
  if ( pc_flag ) {
52
48
 
53
- $(".b").removeAttr('style');
49
+ $(".b *").removeAttr('style');
54
50
 
55
51
  }
56
52
 
@@ -66,10 +62,24 @@
66
62
 
67
63
 
68
64
 
69
- SP時に実行したイベントを横幅768px以上に可変した場合に、
65
+ ### 問題となっているところ
70
66
 
71
- できればイベントごとリセットする方法がありしたら、アドバイスいただけますと幸いです
67
+ 横幅769px以上のPCレアウト時に、SPレイアウト時に実行したJSイベントリセットされせん
72
68
 
73
69
 
74
70
 
75
- どうぞよろくお願いたします。
71
+ ### 実現こと
72
+
73
+ PC時にSPレイアウト時に実行したJSイベントをリセットしたいです。
74
+
75
+
76
+
77
+ ### 教えてほしいこと
78
+
79
+ とりあえず、スクリプトによってHTMLに書き加えたstyle属性を削除できれば意図した動きになるため、削除しようとremoveAttrメソッドを使用したのですがうまくいかず、このメソッドの使い方を間違えているのか知りたいです。また、スマホレイアウト時に実行したイベント毎、PC時にはリセットするという方法が「実行したイベント リセット js」などで検索しても見つけられず、リセット方法がもしありましたら教えていただきたいです。
80
+
81
+
82
+
83
+ どなたかアドバイスいただけますと助かります。
84
+
85
+ よろしくお願い申し上げます。