質問編集履歴
7
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
```html
|
|
2
2
|
<table>
|
|
3
|
+
<thead>
|
|
4
|
+
<th class="sort" data-sort="group-a">A</th>
|
|
5
|
+
<th class="sort" data-sort="group-b">B</th>
|
|
6
|
+
<th class="sort" data-sort="group-c">C</th>
|
|
7
|
+
</thead>
|
|
8
|
+
<tbody>
|
|
3
|
-
|
|
9
|
+
<tr>
|
|
4
|
-
|
|
10
|
+
<td class="group-a before01">内容01-1</td>
|
|
5
|
-
|
|
11
|
+
<td class="group-a after01">内容01-2</td>
|
|
6
|
-
|
|
12
|
+
<td class="group-b">内容02</td>
|
|
7
|
-
|
|
13
|
+
<td class="group-c">内容03</td>
|
|
8
|
-
|
|
14
|
+
</tr><tr>
|
|
9
|
-
|
|
15
|
+
<td class="group-a">内容04</td>
|
|
10
|
-
|
|
16
|
+
<td class="group-b before01">内容05-1</td>
|
|
11
|
-
|
|
17
|
+
<td class="group-b after01">内容05-2</td>
|
|
12
|
-
|
|
18
|
+
<td class="group-a">内容06</td>
|
|
13
|
-
|
|
19
|
+
</tr>
|
|
14
20
|
・
|
|
15
21
|
・
|
|
16
22
|
・
|
|
23
|
+
<tbody>
|
|
17
24
|
</table>
|
|
18
25
|
|
|
19
26
|
<input type="checkbox" id="change01"><label for="change01">変更</label>
|
6
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
この様なhtmlでチェックボックス「ID：change01」をクリックした時に、クラス「before01」と「after01」の表示を切り替えたいと思っています。
|
|
24
|
-
各列にList.jsによるソートをかけているので、
|
|
24
|
+
各列にList.jsによるソート(指定したクラスでソート)をかけているので、要素の位置を前後に入れ替えた上で要素を表示/非表示にしています。
|
|
25
25
|
|
|
26
26
|
```Jquery
|
|
27
27
|
|
|
@@ -41,6 +41,6 @@
|
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。
|
|
44
|
-
どうしたら各要素毎に
|
|
44
|
+
どうしたら各要素毎に入れ替えと表示/非表示ができるのでしょうか？
|
|
45
45
|
教えていただけるとありがたいです。
|
|
46
46
|
よろしくお願いします。
|
5
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
```css
|
|
40
|
-
.
|
|
40
|
+
.after01{display:none;}
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。
|
4
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -38,7 +38,6 @@
|
|
|
38
38
|
|
|
39
39
|
```css
|
|
40
40
|
.after{display:none;}
|
|
41
|
-
コード
|
|
42
41
|
```
|
|
43
42
|
|
|
44
43
|
ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。
|
3
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
|
|
28
28
|
$('#change01').change(function(){
|
|
29
29
|
if ($(this).is(':checked')) {
|
|
30
|
-
$('.after01').after($('before01')).show();
|
|
30
|
+
$('.after01').after($('.before01')).show();
|
|
31
31
|
$('.before01').hide();
|
|
32
32
|
} else {
|
|
33
|
-
$('.before01').after($('after01')).show();
|
|
33
|
+
$('.before01').after($('.after01')).show();
|
|
34
34
|
$('.after01').hide();
|
|
35
35
|
}
|
|
36
36
|
});
|
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
<td class="after01">内容01-2</td>
|
|
6
6
|
<td>内容02</td>
|
|
7
7
|
<td>内容03</td>
|
|
8
|
-
</tr>
|
|
8
|
+
</tr><tr>
|
|
9
9
|
<td>内容04</td>
|
|
10
10
|
<td class="before01">内容05-1</td>
|
|
11
11
|
<td class="after01">内容05-2</td>
|
|
12
12
|
<td>内容06</td>
|
|
13
|
+
</tr>
|
|
13
14
|
・
|
|
14
15
|
・
|
|
15
16
|
・
|
|
16
|
-
</tr>
|
|
17
17
|
</table>
|
|
18
18
|
|
|
19
19
|
<input type="checkbox" id="change01"><label for="change01">変更</label>
|
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
$('.before01').hide();
|
|
32
32
|
} else {
|
|
33
33
|
$('.before01').after($('after01')).show();
|
|
34
|
-
$('.
|
|
34
|
+
$('.after01').hide();
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
```
|