回答編集履歴
2
chousei
answer
CHANGED
|
@@ -57,18 +57,15 @@
|
|
|
57
57
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
58
58
|
<script>
|
|
59
59
|
var view_length_default = 4;
|
|
60
|
-
var view_length;
|
|
61
60
|
var view_length_add = 2;
|
|
62
61
|
$(function() {
|
|
63
62
|
$('.search-box input').on('change',function(){
|
|
64
|
-
|
|
63
|
+
view(view_length_default);
|
|
65
|
-
view();
|
|
66
64
|
}).eq(0).trigger('change');
|
|
67
65
|
$('#moreBtn').on('click',function(){
|
|
68
|
-
|
|
66
|
+
view($('#searchList li:visible').length+view_length_add);
|
|
69
|
-
view();
|
|
70
67
|
});
|
|
71
|
-
function view(){
|
|
68
|
+
function view(view_length){
|
|
72
69
|
var k=$('.search-box [name=koumoku]:checked').map(function(){
|
|
73
70
|
return $(this).val();
|
|
74
71
|
}).get();
|
|
@@ -116,5 +113,4 @@
|
|
|
116
113
|
</ul>
|
|
117
114
|
<div id="moreBtn">続きを表示</div>
|
|
118
115
|
</div>
|
|
119
|
-
|
|
120
116
|
```
|
1
tudiki
answer
CHANGED
|
@@ -50,6 +50,71 @@
|
|
|
50
50
|
</ul>
|
|
51
51
|
<div id="moreBtn">続きを表示</div>
|
|
52
52
|
</div>
|
|
53
|
+
```
|
|
53
54
|
|
|
55
|
+
# 続きを表示
|
|
56
|
+
```javascript
|
|
57
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
58
|
+
<script>
|
|
59
|
+
var view_length_default = 4;
|
|
60
|
+
var view_length;
|
|
61
|
+
var view_length_add = 2;
|
|
62
|
+
$(function() {
|
|
63
|
+
$('.search-box input').on('change',function(){
|
|
64
|
+
view_length = view_length_default;
|
|
65
|
+
view();
|
|
66
|
+
}).eq(0).trigger('change');
|
|
67
|
+
$('#moreBtn').on('click',function(){
|
|
68
|
+
view_length += view_length_add;
|
|
69
|
+
view();
|
|
70
|
+
});
|
|
71
|
+
function view(){
|
|
72
|
+
var k=$('.search-box [name=koumoku]:checked').map(function(){
|
|
73
|
+
return $(this).val();
|
|
74
|
+
}).get();
|
|
75
|
+
var t=$('.search-box [name=tag]:checked').map(function(){
|
|
76
|
+
return $(this).val();
|
|
77
|
+
}).get();
|
|
78
|
+
var ele=$('#searchList li').hide().filter(function(){
|
|
79
|
+
var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
|
|
80
|
+
var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
|
|
81
|
+
return flg_t && flg_k;
|
|
82
|
+
});
|
|
83
|
+
ele.filter(':lt('+view_length+')').show();
|
|
84
|
+
$('#moreBtn').toggle(ele.length>view_length);
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
88
|
+
<ul class="search-box">
|
|
89
|
+
<li>
|
|
90
|
+
<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
|
|
91
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
|
|
92
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
|
|
93
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
|
|
94
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
|
|
95
|
+
</ul>
|
|
96
|
+
<ul class="search-box">
|
|
97
|
+
<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
|
|
98
|
+
<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
|
|
99
|
+
<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
|
|
100
|
+
<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
|
|
101
|
+
<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
|
|
102
|
+
</ul>
|
|
54
103
|
|
|
104
|
+
<div class="contents">
|
|
105
|
+
<ul class="flex" id="searchList">
|
|
106
|
+
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目：1、タグ1,タグ2</li>
|
|
107
|
+
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目：2、タグ2</li>
|
|
108
|
+
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目：3、タグ3</li>
|
|
109
|
+
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目：4、タグ4,タグ2</li>
|
|
110
|
+
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目：5、タグ5</li>
|
|
111
|
+
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目：1、タグ1,タグ2</li>
|
|
112
|
+
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目：2、タグ2</li>
|
|
113
|
+
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目：3、タグ3</li>
|
|
114
|
+
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目：4、タグ4,タグ2</li>
|
|
115
|
+
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目：5、タグ5</li>
|
|
116
|
+
</ul>
|
|
117
|
+
<div id="moreBtn">続きを表示</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
55
120
|
```
|