teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQueryによるclassの取得方法　※※質問内容編集中につき、ご回答はお待ちください※※

編集履歴

質問編集履歴

11

タイトル変更

2018/04/09 01:20

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- jQueryによるclassの取得方法
1
+ jQueryによるclassの取得方法　※※質問内容編集中につき、ご回答はお待ちください※※
test CHANGED
File without changes

10

誤字

2018/04/09 01:20

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,23 @@
1
+ ###現在回答は募集しておりません。m(_ _)m
2
+
3
+
4
+
5
+ ※※※※※※※※※※※※※※※※※※※※※※※※※
6
+
7
+ 自身の質問内容が不明瞭でした。
8
+
9
+ ご回答頂く前に一度整理して出直したいと思います。
10
+
11
+ ご迷惑おかけし大変申し訳ございません。
12
+
13
+ ※※※※※※※※※※※※※※※※※※※※※※※※※
14
+
15
+
16
+
17
+
18
+
19
+ ###以下、元の質問文です
20
+
1
21
  押したボタンに応じて表示を切り替えたいです。
2
22
 
3
23
 

9

誤字くん

2018/04/09 01:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 次のHTMLで、『3』を入力して「btn_a」を押したときに、後述するような処理で表示を切り替えることはできますか？
5
+ 次のHTMLで、たとえば『3』を入力して「btn_a」を押したときに、後述するような処理で表示を切り替えることはできますか？
6
6
 
7
7
 
8
8
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  ```
70
70
 
71
- 処理というのは次のような経緯です。
71
+ 『3』を入力して「btn_a」を押したときにやりたい処理、というのは次のような経緯です。
72
72
 
73
73
  【.aXX についての処理】と【.bXX についての処理】があります。
74
74
 
@@ -88,7 +88,7 @@
88
88
 
89
89
 
90
90
 
91
- ➁「.grape に属する.aXX」と「.appleに属する.aXX」を整理する。
91
+ ➁「.apple に属する.aXX」と「.grapeに属する.aXX」を整理する。
92
92
 
93
93
  →「.a10 .a12 .a19 」「.a20 .a24 .a28」
94
94
 

8

誤字

2018/04/08 13:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- ➂その中から、入力した『3』の次に大きい数を取得する。
97
+ ➂その中から、『3』（入力した値）の次に大きい数を取得する。
98
98
 
99
99
  →「10」「20」
100
100
 

7

内容の簡略化

2018/04/08 13:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,22 +1,10 @@
1
- ###現状
2
-
3
- 押したボタンに応じて表示を切り替えてます。
1
+ 押したボタンに応じて表示を切り替えたいです。
4
2
 
5
3
 
6
4
 
7
- 下記JSでは９つの``if{…}``で切り替えていますが、これを一括した指示でできませんでしょうか？
5
+ 次のHTMLで、『3』を入力して「btn_a」を押したときに、後述するような処理で表示を切り替えることはできますか？
8
6
 
9
7
 
10
-
11
-
12
-
13
- ▼動くサンプル
14
-
15
- [https://jsfiddle.net/36hm1r16/](https://jsfiddle.net/36hm1r16/)
16
-
17
-
18
-
19
- ▼そのコード
20
8
 
21
9
  ```html
22
10
 
@@ -30,7 +18,9 @@
30
18
 
31
19
  <div class="multi_list">
32
20
 
33
- <span id="multi10">10</span>
21
+ <span id="multi_a">22</span>
22
+
23
+ <span id="multi_b">33</span>
34
24
 
35
25
  </div>
36
26
 
@@ -39,6 +29,8 @@
39
29
  <div class="flex">
40
30
 
41
31
  <div class="btn_a">ボタンa</div>
32
+
33
+ <div class="btn_b">ボタンb</div>
42
34
 
43
35
  </div>
44
36
 
@@ -50,23 +42,23 @@
50
42
 
51
43
  <tr>
52
44
 
53
- <td class="apple num_a a10">a75</td>
45
+ <td class="apple num_a a10">a10</td>
54
46
 
55
- <td class="apple num_a a200">a51</td>
47
+ <td class="apple num_a a12">a12</td>
56
48
 
57
- <td class="apple num_a a1000">a33</td>
49
+ <td class="apple num_a a19">a19</td>
58
50
 
59
- <td class="grape num_a a300">a12</td>
51
+ <td class="grape num_a a20">a20</td>
60
52
 
61
- <td class="grape num_a a1000">a77</td>
53
+ <td class="grape num_a a24">a24</td>
62
54
 
63
- <td class="grape num_a a2000">a82</td>
55
+ <td class="grape num_a a28">a28</td>
64
56
 
65
- <td class="banana num_b b20">b56</td>
57
+ <td class="banana num_b b62">b62</td>
66
58
 
67
- <td class="banana num_b b600">b18</td>
59
+ <td class="banana num_b b67">b67</td>
68
60
 
69
- <td class="banana num_b b2000">b92</td>
61
+ <td class="banana num_b b69">b69</td>
70
62
 
71
63
  </tr>
72
64
 
@@ -76,156 +68,94 @@
76
68
 
77
69
  ```
78
70
 
71
+ 処理というのは次のような経緯です。
79
72
 
80
-
81
- ```javascript
73
+ 【.aXX についての処理】と【.bXX についての処理】があります。
82
-
83
- (function($){
84
74
 
85
75
 
86
76
 
87
- //// ボタンaをクリックしたとき
77
+ ---
88
-
89
- $('.btn_a').click(function() {
90
78
 
91
79
 
92
80
 
93
- // 代入
81
+ 【.aXX についての処理】
94
-
95
- var point = $('#inputpoint').val();
96
-
97
- var multi10 = $("#multi10").text();
98
-
99
- var result10 = point * multi10;
100
82
 
101
83
 
102
84
 
103
- // 「point」と比べて非表示(apple)
85
+ ➀.num_a をもつtdを探す。
104
86
 
105
- if (point < 10) {
106
-
107
- $(".a10").css('display','table-cell');
108
-
109
- $(".a200, .a1000").css('display','none');
110
-
111
- }
112
-
113
- if (point > 9 && point < 200) {
114
-
115
- $(".a200").css('display','table-cell');
116
-
117
- $(".a10, .a1000").css('display','none');
118
-
119
- }
120
-
121
- if (point > 199) {
122
-
123
- $(".a1000").css('display','table-cell');
124
-
125
- $(".a10, .a200").css('display','none');
126
-
127
- }
128
-
129
-
130
-
131
- // 「point」と比べて非表示(grape)
132
-
133
- if (point < 300) {
134
-
135
- $(".a300").css('display','table-cell');
136
-
137
- $(".a1000, .a2000").css('display','none');
138
-
139
- }
140
-
141
- if (point > 299 && point < 2000) {
142
-
143
- $(".a1000").css('display','table-cell');
144
-
145
- $(".a300, .a2000").css('display','none');
146
-
147
- }
148
-
149
- if (point > 1999) {
150
-
151
- $(".a2000").css('display','table-cell');
152
-
153
- $(".a300, .a1000").css('display','none');
154
-
155
- }
156
-
157
-
158
-
159
- // 「result10」と比べて非表示(banana)
160
-
161
- if (result10 < 20) {
162
-
163
- $(".b20").css('display','table-cell');
164
-
165
- $(".b600, .b2000").css('display','none');
166
-
167
- }
168
-
169
- if (result10 > 19 && result10 < 600) {
170
-
171
- $(".b600").css('display','table-cell');
172
-
173
- $(".b20, .b2000").css('display','none');
174
-
175
- }
176
-
177
- if (result10 > 599) {
87
+ →.appleのtdが３つ、.grapeのtdが３つ判明。
178
-
179
- $(".2000").css('display','table-cell');
180
-
181
- $(".b20, .b600").css('display','none');
182
-
183
- }
184
88
 
185
89
 
186
90
 
187
- });
91
+ ➁「.grape に属する.aXX」と「.appleに属する.aXX」を整理する。
188
92
 
189
- })(jQuery);
93
+ →「.a10 .a12 .a19 」「.a20 .a24 .a28」
190
-
191
- ```
192
94
 
193
95
 
194
96
 
195
- 一括って、何？という話なので、下記例でご説明いたします。（結果は上のコードと同じです。）
97
+ ➂その中から、入力した『3』の次に大きい数を取得する。
98
+
99
+ →「10」「20」
196
100
 
197
101
 
198
102
 
199
- 【例】
103
+ ➃それらの.aXX 表示する。
200
104
 
201
- > 『3』を入力して「btn_a」を押したら、➀➁➂をする。
105
+ →.a10 {display:table-cell;}
202
106
 
203
- ➀「apple > num_a > の次のクラス（a10、a200、a1000）を取得する。
107
+ →.a20 {display:table-cell;}
204
108
 
205
- その中から『3』の次に大きい数（10）のクラス（a10）だけ``display:table-cell;``する。
206
109
 
207
- 他のクラス（a200、a1000）は``display:none;``にする。
208
110
 
209
- ➁「grape > num_a > の次のクラス（a300、a1000、a2000）を取得する。
111
+ ➄他を非表示にする。
210
112
 
211
- その中から『3』の次に大きい数（300）のクラス（a300）
113
+ →.a12 {display:none;}
212
114
 
213
- だけ``display:table-cell;``する。
115
+ →.a19 {display:none;}
214
116
 
215
- 他のクラス（a1000、a2000）は``display:none;``にする。
117
+ →.a24 {display:none;}
216
118
 
217
- ➂「banana > num_b > の次のクラス（b20、b600、b2000）を取得する。
119
+ →.a28 {display:none;}
218
120
 
219
- その中から『30』の次に大きい数（600）のクラス（b600）
220
121
 
221
- だけ``display:table-cell;``する。
222
122
 
223
- 他のクラス（b20とb2000）は``display:none;``にする。
123
+ ---
224
124
 
225
125
 
226
126
 
227
127
 
228
128
 
229
- ちなみになぜ、➂の「.banana」だけは、入力した『3』が『30』になってるのか？
129
+ 【.bXX についての処理】
230
130
 
131
+
132
+
133
+ ➀.num_b をもつtdを探す。
134
+
135
+ →.bananaのtdが３つ判明。
136
+
137
+
138
+
139
+ ➁「.banana に属する.bXXを整理する。
140
+
141
+ →「.b62 .b67 .b69 」
142
+
143
+
144
+
231
- といいますと、[.btn_a」をクリックしたときの「.banana」は、入力値に１０を掛けた値（result10）と比べないと、死んじゃうからです。
145
+ ➂その中から、『66』（入力した『3』に#multi_aの値を掛けた数）の次に大きい数を取得する。
146
+
147
+ →「67」
148
+
149
+
150
+
151
+ ➃その.bXX 表示する。
152
+
153
+ →.b67 {display:table-cell;}
154
+
155
+
156
+
157
+ ➄他を非表示にする。
158
+
159
+ →.b62 {display:none;}
160
+
161
+ →.b69 {display:none;}

6

リンク先の変更

2018/04/08 13:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ▼動くサンプル
14
14
 
15
- [https://jsfiddle.net/t7taotvp/](https://jsfiddle.net/t7taotvp/)
15
+ [https://jsfiddle.net/36hm1r16/](https://jsfiddle.net/36hm1r16/)
16
16
 
17
17
 
18
18
 

5

誤字

2018/04/08 09:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  }
112
112
 
113
- if (point > 10 && point < 200) {
113
+ if (point > 9 && point < 200) {
114
114
 
115
115
  $(".a200").css('display','table-cell');
116
116
 
@@ -118,7 +118,7 @@
118
118
 
119
119
  }
120
120
 
121
- if (point > 200) {
121
+ if (point > 199) {
122
122
 
123
123
  $(".a1000").css('display','table-cell');
124
124
 
@@ -138,7 +138,7 @@
138
138
 
139
139
  }
140
140
 
141
- if (point > 300 && point < 2000) {
141
+ if (point > 299 && point < 2000) {
142
142
 
143
143
  $(".a1000").css('display','table-cell');
144
144
 
@@ -146,7 +146,7 @@
146
146
 
147
147
  }
148
148
 
149
- if (point > 2000) {
149
+ if (point > 1999) {
150
150
 
151
151
  $(".a2000").css('display','table-cell');
152
152
 
@@ -166,7 +166,7 @@
166
166
 
167
167
  }
168
168
 
169
- if (result10 > 20 && result10 < 600) {
169
+ if (result10 > 19 && result10 < 600) {
170
170
 
171
171
  $(".b600").css('display','table-cell');
172
172
 
@@ -174,7 +174,7 @@
174
174
 
175
175
  }
176
176
 
177
- if (result10 > 600) {
177
+ if (result10 > 599) {
178
178
 
179
179
  $(".2000").css('display','table-cell');
180
180
 

4

誤字くんだよー

2018/04/08 09:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -226,6 +226,6 @@
226
226
 
227
227
 
228
228
 
229
- ちなみになぜ、➂の「.banana」だけ入力した『3』が『30』になってるのか？
229
+ ちなみになぜ、➂の「.banana」だけは、入力した『3』が『30』になってるのか？
230
230
 
231
231
  といいますと、[.btn_a」をクリックしたときの「.banana」は、入力値に１０を掛けた値（result10）と比べないと、死んじゃうからです。

3

誤字くん

2018/04/08 07:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -192,15 +192,13 @@
192
192
 
193
193
 
194
194
 
195
- 一括って、何？という話なので、下記例でご説明いたします。
195
+ 一括って、何？という話なので、下記例でご説明いたします。（結果は上のコードと同じです。）
196
-
197
- （上のコードと同じ動きです。）
198
196
 
199
197
 
200
198
 
201
199
  【例】
202
200
 
203
- > 『3』を入力して「btn_a」を押したら、
201
+ > 『3』を入力して「btn_a」を押したら、➀➁➂をする。
204
202
 
205
203
  ➀「apple > num_a > の次のクラス（a10、a200、a1000）を取得する。
206
204
 
@@ -228,4 +226,6 @@
228
226
 
229
227
 
230
228
 
229
+ ちなみになぜ、➂の「.banana」だけ入力した『3』が『30』になってるのか？
230
+
231
- ちなみになぜ「.banana」だけ『3』が『30』になってるか？といいますと、[.btn_a」をクリックしたときの「.banana」は、入力値に１０を掛けた「result10」と比べないと、死んじゃうからです。
231
+ といいますと、[.btn_a」をクリックしたときの「.banana」は、入力値に１０を掛けた値（result10）と比べないと、死んじゃうからです。

2

誤字

2018/04/08 07:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ▼動くサンプル
14
14
 
15
- [https://jsfiddle.net/cr8tc9wv/](https://jsfiddle.net/cr8tc9wv/)
15
+ [https://jsfiddle.net/t7taotvp/](https://jsfiddle.net/t7taotvp/)
16
16
 
17
17
 
18
18
 

1

誤字

2018/04/08 07:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -66,7 +66,7 @@
66
66
 
67
67
  <td class="banana num_b b600">b18</td>
68
68
 
69
- <td class="banana num_b b2000">c92</td>
69
+ <td class="banana num_b b2000">b92</td>
70
70
 
71
71
  </tr>
72
72