teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ボタンにカレントクラスを付与したい

編集履歴

質問編集履歴

18

修正

2020/02/02 02:23

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -28,6 +28,14 @@
28
28
 
29
29
  ```
30
30
 
31
+ このエラーが以下に対して出ました。
32
+
33
+ ```
34
+
35
+ if ($('#bw_swich').attr('onclick').match(/change2/)) {
36
+
37
+ ```
38
+
31
39
 
32
40
 
33
41
  ### ボタンのソースコード

17

修正

2020/02/02 02:23

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,8 @@
98
98
 
99
99
  </div>
100
100
 
101
+ </div>
102
+
101
103
  ```
102
104
 
103
105
  htmlにmain要素は記載しています。

16

修正

2020/02/02 02:14

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
File without changes

15

修正

2020/02/02 02:13

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### 発生している問題
16
16
 
17
- ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。
17
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状、背景の色はページをまたぐと元に戻ってしまいます。
18
18
 
19
19
 
20
20
 
@@ -76,9 +76,27 @@
76
76
 
77
77
  ```html
78
78
 
79
+ <div id="main">
80
+
81
+ 　　<div id="bw_swich">
82
+
79
- <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
83
+ <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
80
-
84
+
81
- <input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
85
+ 　<input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
86
+
87
+ </div>
88
+
89
+ <div id="novel">
90
+
91
+ <button id="honbun_next"><i title="次のページへ">＜</i></button>
92
+
93
+ <div div id="honbun" class="serif middle">
94
+
95
+ <button id="honbun_prev"><i title="前のページへ">＞</i></button>
96
+
97
+ </div>
98
+
99
+ </div>
82
100
 
83
101
  ```
84
102
 

14

修正

2020/02/02 02:10

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -156,61 +156,59 @@
156
156
 
157
157
  function() {
158
158
 
159
- // 画面読み込み時の背景切り替えボタンのカレントクラス付与
160
-
161
- if (!Cookies.get('cookieColor')) {
162
-
163
- // クッキー未登録時に診断してカレントクラスを付与
164
-
165
- if ($('main').attr('class').match(/change2/)) {
166
-
167
- $('#White').addClass('current');
168
-
169
- $("main").addClass('change2');
170
-
171
- $("main").removeClass('change1');
172
-
173
- } else {
174
-
175
- $('#Black').addClass('current');
176
-
177
- $("main").removeClass('change2');
178
-
179
- $("main").addClass('change1');
180
-
181
- }
182
-
183
- } else if (Cookies.get('cookieColor') == 'change2') {
184
-
185
- // クッキー白登録であれば白ボタンにクラス付与
186
-
187
- $('#White').addClass('current');
188
-
189
- $('#Black').removeClass('current');
190
-
191
- // 黒クラス付与
192
-
193
- $("main").addClass('change2');
194
-
195
- $("main").removeClass('change1');
196
-
197
- } else if (Cookies.get('cookieColor') == 'change1') {
198
-
199
- // クッキー黒登録であれば黒ボタンにクラス付与
200
-
201
- $('#White').removeClass('current');
202
-
203
- $('#Black').addClass('current');
204
-
205
- // 白クラス付与
206
-
207
- $("main").removeClass('change2');
208
-
209
- $("main").addClass('change1');
210
-
211
- }
212
-
213
- }
159
+ if (!Cookies.get('cookieColor')) {
160
+
161
+ // クッキー未登録時に診断してカレントクラスを付与
162
+
163
+ if ($('#bw_swich').attr('onclick').match(/change2/)) {
164
+
165
+ $('#White').addClass('current');
166
+
167
+ $("#honbun").add('change2');
168
+
169
+ $("#honbun").remove('change1');
170
+
171
+ } else {
172
+
173
+ $('#Black').addClass('current');
174
+
175
+ $("#honbun").remove('change2');
176
+
177
+ $("#honbun").add('change1');
178
+
179
+ }
180
+
181
+ } else if (Cookies.get('cookieColor') == 'change2') {
182
+
183
+ // クッキー白登録であれば白ボタンにクラス付与
184
+
185
+ $('#White').addClass('current');
186
+
187
+ $('#Black').removeClass('current');
188
+
189
+ // 黒クラス付与
190
+
191
+ $("#honbun").add('change2');
192
+
193
+ $("#honbun").remove('change1');
194
+
195
+ } else if (Cookies.get('cookieColor') == 'change1') {
196
+
197
+ // クッキー黒登録であれば黒ボタンにクラス付与
198
+
199
+ $('#White').removeClass('current');
200
+
201
+ $('#Black').addClass('current');
202
+
203
+ // 白クラス付与
204
+
205
+ $("#honbun").remove('change2');
206
+
207
+ $("#honbun").add('change1');
208
+
209
+ }
210
+
211
+ }
214
212
 
215
213
  );
216
214
 

13

修正

2020/02/02 02:02

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,18 @@
18
18
 
19
19
 
20
20
 
21
+ ### エラー
22
+
23
+ ```
24
+
25
+ Uncaught TypeError: Cannot read property 'match' of undefined
26
+
27
+ at HTMLDocument.<anonymous> (jquery.illbenet_novel.js:18)
28
+
29
+ ```
30
+
31
+
32
+
21
33
  ### ボタンのソースコード
22
34
 
23
35
 

12

2020/02/02 01:59

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,8 @@
70
70
 
71
71
  ```
72
72
 
73
+ htmlにmain要素は記載しています。
74
+
73
75
  ```css
74
76
 
75
77
  #White.current, #Black.current{～～～装飾～～～}

11

2020/01/28 08:40

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -212,4 +212,4 @@
212
212
 
213
213
 
214
214
 
215
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。
215
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。クッキーの動向はサーバー上でテストページを作って見ています。

10

2020/01/28 08:10

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -212,4 +212,4 @@
212
212
 
213
213
 
214
214
 
215
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。
215
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。

9

2020/01/28 07:45

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### 発生している問題
16
16
 
17
- ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。
17
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。
18
18
 
19
19
 
20
20
 

8

2020/01/28 07:44

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -212,4 +212,4 @@
212
212
 
213
213
 
214
214
 
215
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）
215
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。

7

2020/01/28 07:39

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### 発生している問題
16
16
 
17
- カレントクラスを付与できません。試したこと二個目に記載したjavaScriptが違うようで、クッキーに保存されません。
17
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。
18
18
 
19
19
 
20
20
 

6

変更

2020/01/28 07:21

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### 発生している問題
16
16
 
17
- カレントクラスを付与できません。試したこと二個目のクッキーが保存されません。やり方がわからないので、何が間違っているのか分かりません。
17
+ カレントクラスを付与できません。試したこと二個目に記載したjavaScriptが違うようで、クッキーに保存されません。
18
18
 
19
19
 
20
20
 

5

変更

2020/01/28 04:33

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### 発生している問題
16
16
 
17
- カレントクラスを付与できません。やり方がわからないので、何が間違っているのか分かりません。
17
+ カレントクラスを付与できません。試したこと二個目のクッキーが保存されません。やり方がわからないので、何が間違っているのか分かりません。
18
18
 
19
19
 
20
20
 

4

変更

2020/01/28 04:29

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -90,11 +90,11 @@
90
90
 
91
91
  　　　// White設定ボタン押下時にカレントクラスを付与
92
92
 
93
- $("#white").click(function () {
93
+ $("#White").click(function () {
94
94
 
95
95
  // ボタンにカレントクラスを付与
96
96
 
97
- $("#white").addClass('current');
97
+ $("#White").addClass('current');
98
98
 
99
99
  $("#Black").removeClass('current');
100
100
 
@@ -118,7 +118,7 @@
118
118
 
119
119
  $("#Black").addClass('current');
120
120
 
121
- $("#white").removeClass('current');
121
+ $("#White").removeClass('current');
122
122
 
123
123
  //
124
124
 
@@ -202,7 +202,7 @@
202
202
 
203
203
  ```
204
204
 
205
- 困っています。どうかお助けください。お願いいたします。
205
+ 試したこと二個目のjavascriptが効かなくて困っています。どうかお助けください。お願いいたします。
206
206
 
207
207
 
208
208
 

3

変更

2020/01/28 03:37

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaを書きたいのですが……。
9
+ ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaScriptを書きたいのですが……。
10
10
 
11
11
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
12
12
 

2

変更

2020/01/28 03:10

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -212,4 +212,4 @@
212
212
 
213
213
 
214
214
 
215
- chrome最新版
215
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）

1

質問文変更

2020/01/28 03:02

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ### javaが分からない
1
+ ### javaScriptが分からない
2
2
 
3
3
 
4
4
 
@@ -8,7 +8,7 @@
8
8
 
9
9
  ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaを書きたいのですが……。
10
10
 
11
- 背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaを書きたいです。
11
+ 背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
12
12
 
13
13
 
14
14