質問編集履歴

3

JS・htmlの一部を加筆修正いたしました。

2017/10/16 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,37 +16,37 @@
16
16
 
17
17
  <div id="itemArea">
18
18
 
19
- <div class="items banana type1">バナナ</div>
19
+ <div class="items banana type1" data-size="40">バナナA</div>
20
20
 
21
- <div class="items ringo type0">リンゴ</div>
21
+ <div class="items banana type0" data-size="10">バナナB</div>
22
22
 
23
- <div class="items melon type1">メロン</div>
23
+ <div class="items ringo type0" data-size="25">ゴA</div>
24
24
 
25
- <div class="items ringo type1">リンゴ</div>
25
+ <div class="items ringo type1" data-size="5">リンゴB</div>
26
26
 
27
- <div class="items ringo type0">リンゴ</div>
27
+ <div class="items ringo type0" data-size="30">リンゴC</div>
28
28
 
29
- <div class="items banana type0">バナナ</div>
29
+ <div class="items melon type1" data-size="18">メロンA</div>
30
30
 
31
31
  </div>
32
32
 
33
33
  ```
34
34
 
35
- そして、上記のhtmlに対して、
36
-
37
- $hoge01・$hoge02・$hoge03がtrueだった場合に、
35
+ そして、上記のhtmlに対して、```data-size=""```の値が21以上の場合に、
38
36
 
39
37
  非表示(hide)とするJQueryが存在します。
40
38
 
41
39
  ```JavaScript
42
40
 
41
+ var $elm = $('#itemArea .items');
42
+
43
+ var $num = '20';
44
+
45
+
46
+
43
47
  $elm.show().filter(function () {
44
48
 
45
- return $hoge01 == true ||
49
+ return $(this).data('size') > $num;
46
-
47
- $hoge02 == true ||
48
-
49
- $hoge03 == true;
50
50
 
51
51
  }).hide();
52
52
 
@@ -66,6 +66,30 @@
66
66
 
67
67
  ```
68
68
 
69
+ ちなみに、チェックボックスがcheckedの状態だと、```.type1```のみが表示され、
70
+
71
+ それ以外は非表示(display:none)となる別のJSが存在します。
72
+
73
+
74
+
75
+ ```JavaScript
76
+
77
+ $('#Btn .btnType').change(function () {
78
+
79
+ if ($(this).is(':checked')) {
80
+
81
+ $($target).hide();
82
+
83
+ } else {
84
+
85
+ $($target).show();
86
+
87
+ }
88
+
89
+ });
90
+
91
+ ```
92
+
69
93
 
70
94
 
71
95
  以上、何卒宜しくお願い致します。

2

htmlを一部編集しました

2017/10/16 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  <div id="Btn">
62
62
 
63
- <label><input type="checkbox" class="btnRingo"></label>
63
+ <label><input type="checkbox" class="btnType"></label>
64
64
 
65
65
  </div>
66
66
 

1

不要なhtml箇所を削除しました

2017/10/16 02:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -62,8 +62,6 @@
62
62
 
63
63
  <label><input type="checkbox" class="btnRingo"></label>
64
64
 
65
- <span>リンゴのみソート対象とする</span>
66
-
67
65
  </div>
68
66
 
69
67
  ```