質問編集履歴

5

不要のため消しました

2020/06/04 13:23

投稿

yuri1333
yuri1333

スコア2

test CHANGED
File without changes
test CHANGED
@@ -54,15 +54,237 @@
54
54
 
55
55
  ```HTML
56
56
 
57
+
58
+
59
+ <div class="setup-action__switch">
60
+
61
+ <div id="test" class="setup-action__switch-body">
62
+
63
+ <div id="a" class="setup-action__switch-body-a"></div>
64
+
65
+ <div id="b" class="setup-action__switch-body-b"></div>
66
+
67
+ </div>
68
+
69
+ </div>
70
+
71
+
72
+
73
+
74
+
75
+ ```
76
+
77
+
78
+
79
+
80
+
81
+ ```
82
+
83
+ .setup-action {
84
+
85
+
86
+
87
+ &__switch {
88
+
89
+ /* スイッチ台座部分 */
90
+
91
+ width: 200px;
92
+
93
+ height: 50px;
94
+
95
+ margin: 0 auto;
96
+
97
+ border-radius: 50%;
98
+
99
+ background-color: #d3d3d3;
100
+
101
+ }
102
+
103
+
104
+
105
+ &__switch-body {
106
+
107
+ /* スイッチ側面一部(両端) */
108
+
109
+ position: relative;
110
+
111
+ top: -18px;
112
+
113
+ display: block;
114
+
115
+ margin: 0 auto;
116
+
117
+ width: 160px;
118
+
119
+ height: 40px;
120
+
121
+ background-color: #dcdcdc;
122
+
123
+
124
+
125
+ }
126
+
127
+
128
+
129
+ &__switch-body-a,
130
+
131
+ &__switch-body-b {
132
+
133
+ /* スイッチ底面、頭構成部分 */
134
+
135
+ position: absolute;
136
+
137
+ left: 0;
138
+
139
+ display: block;
140
+
141
+ width: 160px;
142
+
143
+ height: 40px;
144
+
145
+ border-radius: 100%;
146
+
147
+ content: '';
148
+
149
+ }
150
+
151
+
152
+
153
+ &__switch-body-a {
154
+
155
+ /* スイッチ底面:位置調整とスタイル */
156
+
157
+ bottom: -20px;
158
+
159
+ background-color: #dcdcdc;
160
+
161
+
162
+
163
+ }
164
+
165
+
166
+
167
+ &__switch-body-b {
168
+
169
+ /* スイッチ頭:位置調整とスタイル */
170
+
171
+ top: -20px;
172
+
173
+ background-color: #f5f5f5;
174
+
175
+ }
176
+
177
+
178
+
179
+ &__switch-body:active {
180
+
181
+ /* クリックアニメーション */
182
+
183
+ height: 20px;
184
+
185
+ top: 2px;
186
+
187
+ }
188
+
189
+ }
190
+
191
+
192
+
193
+ .is-active {
194
+
195
+ /* 選択時スイッチ */
196
+
197
+ height: 28px;
198
+
199
+ top: -6px;
200
+
201
+ background-color: #dc143c;
202
+
203
+ display: block;
204
+
205
+ }
206
+
207
+
208
+
209
+ .is-active-a {
210
+
211
+ /* 選択時スイッチ */
212
+
213
+ background-color: #dc143c;
214
+
215
+ }
216
+
217
+
218
+
219
+ .is-active-b {
220
+
221
+ /* 選択時スイッチ */
222
+
223
+ background-color: #ff0000
224
+
225
+ }
226
+
227
+ ```
228
+
229
+
230
+
231
+ ```Javascript
232
+
233
+ /* スイッチクリックアクション */
234
+
235
+ $(function(){
236
+
237
+ $('.setup-action__switch-body').on('click', function(event){
238
+
239
+ event.preventDefault();
240
+
241
+
242
+
243
+ $(this).toggleClass('is-active');
244
+
245
+ $('#a').toggleClass('is-active-a');
246
+
247
+ $('#b').toggleClass('is-active-b');
248
+
249
+
250
+
251
+
252
+
253
+ });
254
+
255
+ });
256
+
257
+
258
+
259
+
260
+
261
+ ```
262
+
263
+
264
+
265
+ ----------------------------------------------------------------------------------------
266
+
267
+ new 1 ro様のアドバイスより
268
+
269
+
270
+
271
+ 同ページにidが複数あるとご指摘があったため全てidを削除し、クラスセレクタに変更しました。
272
+
273
+ new 1 ro様ご指摘ありがとうございます!
274
+
275
+
276
+
277
+ ```HTML
278
+
57
279
  <% @selected_verbs.each do |verb| %>
58
280
 
59
281
  <div class="setup-action__switch">
60
282
 
61
- <div id="test" class="setup-action__switch-body">
283
+ <div class="setup-action__switch-body">
62
-
284
+
63
- <div id="a" class="setup-action__switch-body-a"></div>
285
+ <div class="setup-action__switch-body-a"></div>
64
-
286
+
65
- <div id="b" class="setup-action__switch-body-b"></div>
287
+ <div class="setup-action__switch-body-b"></div>
66
288
 
67
289
  </div>
68
290
 
@@ -76,158 +298,6 @@
76
298
 
77
299
 
78
300
 
79
-
80
-
81
- ```
82
-
83
- .setup-action {
84
-
85
-
86
-
87
- &__switch {
88
-
89
- /* スイッチ台座部分 */
90
-
91
- width: 200px;
92
-
93
- height: 50px;
94
-
95
- margin: 0 auto;
96
-
97
- border-radius: 50%;
98
-
99
- background-color: #d3d3d3;
100
-
101
- }
102
-
103
-
104
-
105
- &__switch-body {
106
-
107
- /* スイッチ側面一部(両端) */
108
-
109
- position: relative;
110
-
111
- top: -18px;
112
-
113
- display: block;
114
-
115
- margin: 0 auto;
116
-
117
- width: 160px;
118
-
119
- height: 40px;
120
-
121
- background-color: #dcdcdc;
122
-
123
-
124
-
125
- }
126
-
127
-
128
-
129
- &__switch-body-a,
130
-
131
- &__switch-body-b {
132
-
133
- /* スイッチ底面、頭構成部分 */
134
-
135
- position: absolute;
136
-
137
- left: 0;
138
-
139
- display: block;
140
-
141
- width: 160px;
142
-
143
- height: 40px;
144
-
145
- border-radius: 100%;
146
-
147
- content: '';
148
-
149
- }
150
-
151
-
152
-
153
- &__switch-body-a {
154
-
155
- /* スイッチ底面:位置調整とスタイル */
156
-
157
- bottom: -20px;
158
-
159
- background-color: #dcdcdc;
160
-
161
-
162
-
163
- }
164
-
165
-
166
-
167
- &__switch-body-b {
168
-
169
- /* スイッチ頭:位置調整とスタイル */
170
-
171
- top: -20px;
172
-
173
- background-color: #f5f5f5;
174
-
175
- }
176
-
177
-
178
-
179
- &__switch-body:active {
180
-
181
- /* クリックアニメーション */
182
-
183
- height: 20px;
184
-
185
- top: 2px;
186
-
187
- }
188
-
189
- }
190
-
191
-
192
-
193
- .is-active {
194
-
195
- /* 選択時スイッチ */
196
-
197
- height: 28px;
198
-
199
- top: -6px;
200
-
201
- background-color: #dc143c;
202
-
203
- display: block;
204
-
205
- }
206
-
207
-
208
-
209
- .is-active-a {
210
-
211
- /* 選択時スイッチ */
212
-
213
- background-color: #dc143c;
214
-
215
- }
216
-
217
-
218
-
219
- .is-active-b {
220
-
221
- /* 選択時スイッチ */
222
-
223
- background-color: #ff0000
224
-
225
- }
226
-
227
- ```
228
-
229
-
230
-
231
301
  ```Javascript
232
302
 
233
303
  /* スイッチクリックアクション */
@@ -242,9 +312,9 @@
242
312
 
243
313
  $(this).toggleClass('is-active');
244
314
 
245
- $('#a').toggleClass('is-active-a');
315
+ $('setup-action__switch-body-a').toggleClass('is-active-a');
246
-
316
+
247
- $('#b').toggleClass('is-active-b');
317
+ $('setup-action__switch-body-b').toggleClass('is-active-b');
248
318
 
249
319
 
250
320
 
@@ -262,76 +332,6 @@
262
332
 
263
333
 
264
334
 
265
- ----------------------------------------------------------------------------------------
266
-
267
- new 1 ro様のアドバイスより
268
-
269
-
270
-
271
- 同ページにidが複数あるとご指摘があったため全てidを削除し、クラスセレクタに変更しました。
272
-
273
- new 1 ro様ご指摘ありがとうございます!
274
-
275
-
276
-
277
- ```HTML
278
-
279
- <% @selected_verbs.each do |verb| %>
280
-
281
- <div class="setup-action__switch">
282
-
283
- <div class="setup-action__switch-body">
284
-
285
- <div class="setup-action__switch-body-a"></div>
286
-
287
- <div class="setup-action__switch-body-b"></div>
288
-
289
- </div>
290
-
291
- </div>
292
-
293
- </li>
294
-
295
-
296
-
297
- ```
298
-
299
-
300
-
301
- ```Javascript
302
-
303
- /* スイッチクリックアクション */
304
-
305
- $(function(){
306
-
307
- $('.setup-action__switch-body').on('click', function(event){
308
-
309
- event.preventDefault();
310
-
311
-
312
-
313
- $(this).toggleClass('is-active');
314
-
315
- $('setup-action__switch-body-a').toggleClass('is-active-a');
316
-
317
- $('setup-action__switch-body-b').toggleClass('is-active-b');
318
-
319
-
320
-
321
-
322
-
323
- });
324
-
325
- });
326
-
327
-
328
-
329
-
330
-
331
- ```
332
-
333
-
334
-
335
335
  ⬇️結果
336
336
 
337
337
  ![イメージ説明](62b1edd1387ab7a73ce8ebedbdd74584.png)

4

回答のアドバイスをもらったためその結果

2020/06/04 13:23

投稿

yuri1333
yuri1333

スコア2

test CHANGED
File without changes
test CHANGED
@@ -259,3 +259,89 @@
259
259
 
260
260
 
261
261
  ```
262
+
263
+
264
+
265
+ ----------------------------------------------------------------------------------------
266
+
267
+ new 1 ro様のアドバイスより
268
+
269
+
270
+
271
+ 同ページにidが複数あるとご指摘があったため全てidを削除し、クラスセレクタに変更しました。
272
+
273
+ new 1 ro様ご指摘ありがとうございます!
274
+
275
+
276
+
277
+ ```HTML
278
+
279
+ <% @selected_verbs.each do |verb| %>
280
+
281
+ <div class="setup-action__switch">
282
+
283
+ <div class="setup-action__switch-body">
284
+
285
+ <div class="setup-action__switch-body-a"></div>
286
+
287
+ <div class="setup-action__switch-body-b"></div>
288
+
289
+ </div>
290
+
291
+ </div>
292
+
293
+ </li>
294
+
295
+
296
+
297
+ ```
298
+
299
+
300
+
301
+ ```Javascript
302
+
303
+ /* スイッチクリックアクション */
304
+
305
+ $(function(){
306
+
307
+ $('.setup-action__switch-body').on('click', function(event){
308
+
309
+ event.preventDefault();
310
+
311
+
312
+
313
+ $(this).toggleClass('is-active');
314
+
315
+ $('setup-action__switch-body-a').toggleClass('is-active-a');
316
+
317
+ $('setup-action__switch-body-b').toggleClass('is-active-b');
318
+
319
+
320
+
321
+
322
+
323
+ });
324
+
325
+ });
326
+
327
+
328
+
329
+
330
+
331
+ ```
332
+
333
+
334
+
335
+ ⬇️結果
336
+
337
+ ![イメージ説明](62b1edd1387ab7a73ce8ebedbdd74584.png)
338
+
339
+ ![イメージ説明](2c10179b74fa7c1a8182be9323f6f619.png)
340
+
341
+ ![イメージ説明](8b46830ad56db1372eab1326c7c2a590.png)
342
+
343
+ 押したスイッチにしっかりと色がつくようになりましたが他のボタンにも
344
+
345
+ 色がつくようになってしまいました。
346
+
347
+ 解決方法わかる方お願いします。

3

クラス名変更

2020/06/04 12:54

投稿

yuri1333
yuri1333

スコア2

test CHANGED
File without changes
test CHANGED
@@ -234,7 +234,7 @@
234
234
 
235
235
  $(function(){
236
236
 
237
- $('.setup-action__doswitch-body').on('click', function(event){
237
+ $('.setup-action__switch-body').on('click', function(event){
238
238
 
239
239
  event.preventDefault();
240
240
 

2

題名変更

2020/06/04 11:19

投稿

yuri1333
yuri1333

スコア2

test CHANGED
@@ -1 +1 @@
1
- JS押したスイッチだけを色付けるようにさせたいです。
1
+ ジャバスクリプトで押したスイッチだけを色付けるようにさせたいです。
test CHANGED
File without changes

1

ボタンスイッチのId図を追加

2020/06/04 11:16

投稿

yuri1333
yuri1333

スコア2

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,8 @@
48
48
 
49
49
 
50
50
 
51
+ ![イメージ説明](b4374d534a6a9542e458e7c08bda3ca8.png)
52
+
51
53
 
52
54
 
53
55
  ```HTML