回答編集履歴
2
chousei
test
CHANGED
|
@@ -116,29 +116,23 @@
|
|
|
116
116
|
|
|
117
117
|
var view_length_default = 4;
|
|
118
118
|
|
|
119
|
-
var view_length;
|
|
120
|
-
|
|
121
119
|
var view_length_add = 2;
|
|
122
120
|
|
|
123
121
|
$(function() {
|
|
124
122
|
|
|
125
123
|
$('.search-box input').on('change',function(){
|
|
126
124
|
|
|
127
|
-
view
|
|
125
|
+
view(view_length_default);
|
|
128
|
-
|
|
129
|
-
view();
|
|
130
126
|
|
|
131
127
|
}).eq(0).trigger('change');
|
|
132
128
|
|
|
133
129
|
$('#moreBtn').on('click',function(){
|
|
134
130
|
|
|
135
|
-
view
|
|
131
|
+
view($('#searchList li:visible').length+view_length_add);
|
|
136
|
-
|
|
137
|
-
view();
|
|
138
132
|
|
|
139
133
|
});
|
|
140
134
|
|
|
141
|
-
function view(){
|
|
135
|
+
function view(view_length){
|
|
142
136
|
|
|
143
137
|
var k=$('.search-box [name=koumoku]:checked').map(function(){
|
|
144
138
|
|
|
@@ -234,6 +228,4 @@
|
|
|
234
228
|
|
|
235
229
|
</div>
|
|
236
230
|
|
|
237
|
-
|
|
238
|
-
|
|
239
231
|
```
|
1
tudiki
test
CHANGED
|
@@ -102,8 +102,138 @@
|
|
|
102
102
|
|
|
103
103
|
</div>
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
105
|
```
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
# 続きを表示
|
|
110
|
+
|
|
111
|
+
```javascript
|
|
112
|
+
|
|
113
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
114
|
+
|
|
115
|
+
<script>
|
|
116
|
+
|
|
117
|
+
var view_length_default = 4;
|
|
118
|
+
|
|
119
|
+
var view_length;
|
|
120
|
+
|
|
121
|
+
var view_length_add = 2;
|
|
122
|
+
|
|
123
|
+
$(function() {
|
|
124
|
+
|
|
125
|
+
$('.search-box input').on('change',function(){
|
|
126
|
+
|
|
127
|
+
view_length = view_length_default;
|
|
128
|
+
|
|
129
|
+
view();
|
|
130
|
+
|
|
131
|
+
}).eq(0).trigger('change');
|
|
132
|
+
|
|
133
|
+
$('#moreBtn').on('click',function(){
|
|
134
|
+
|
|
135
|
+
view_length += view_length_add;
|
|
136
|
+
|
|
137
|
+
view();
|
|
138
|
+
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
function view(){
|
|
142
|
+
|
|
143
|
+
var k=$('.search-box [name=koumoku]:checked').map(function(){
|
|
144
|
+
|
|
145
|
+
return $(this).val();
|
|
146
|
+
|
|
147
|
+
}).get();
|
|
148
|
+
|
|
149
|
+
var t=$('.search-box [name=tag]:checked').map(function(){
|
|
150
|
+
|
|
151
|
+
return $(this).val();
|
|
152
|
+
|
|
153
|
+
}).get();
|
|
154
|
+
|
|
155
|
+
var ele=$('#searchList li').hide().filter(function(){
|
|
156
|
+
|
|
157
|
+
var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
|
|
158
|
+
|
|
159
|
+
var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
|
|
160
|
+
|
|
161
|
+
return flg_t && flg_k;
|
|
162
|
+
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
ele.filter(':lt('+view_length+')').show();
|
|
166
|
+
|
|
167
|
+
$('#moreBtn').toggle(ele.length>view_length);
|
|
168
|
+
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
</script>
|
|
174
|
+
|
|
175
|
+
<ul class="search-box">
|
|
176
|
+
|
|
177
|
+
<li>
|
|
178
|
+
|
|
179
|
+
<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
|
|
180
|
+
|
|
181
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
|
|
182
|
+
|
|
183
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
|
|
184
|
+
|
|
185
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
|
|
186
|
+
|
|
187
|
+
<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
|
|
188
|
+
|
|
189
|
+
</ul>
|
|
190
|
+
|
|
191
|
+
<ul class="search-box">
|
|
192
|
+
|
|
193
|
+
<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
|
|
194
|
+
|
|
195
|
+
<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
|
|
196
|
+
|
|
197
|
+
<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
|
|
198
|
+
|
|
199
|
+
<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
|
|
200
|
+
|
|
201
|
+
<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
|
|
202
|
+
|
|
203
|
+
</ul>
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
<div class="contents">
|
|
208
|
+
|
|
209
|
+
<ul class="flex" id="searchList">
|
|
210
|
+
|
|
211
|
+
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目：1、タグ1,タグ2</li>
|
|
212
|
+
|
|
213
|
+
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目：2、タグ2</li>
|
|
214
|
+
|
|
215
|
+
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目：3、タグ3</li>
|
|
216
|
+
|
|
217
|
+
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目：4、タグ4,タグ2</li>
|
|
218
|
+
|
|
219
|
+
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目：5、タグ5</li>
|
|
220
|
+
|
|
221
|
+
<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目：1、タグ1,タグ2</li>
|
|
222
|
+
|
|
223
|
+
<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目：2、タグ2</li>
|
|
224
|
+
|
|
225
|
+
<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目：3、タグ3</li>
|
|
226
|
+
|
|
227
|
+
<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目：4、タグ4,タグ2</li>
|
|
228
|
+
|
|
229
|
+
<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目：5、タグ5</li>
|
|
230
|
+
|
|
231
|
+
</ul>
|
|
232
|
+
|
|
233
|
+
<div id="moreBtn">続きを表示</div>
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
```
|