以下のようなコードを書いたところ、正常にactiveクラス
は付与されているようですが、いかがでしょうか?もし初期表示する項目の数を減らしたいのであれば、load関数
の第二引数の値を調整してみてください。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 .js-load {
8 display: none;
9 }
10
11 .js-load.active {
12 display: block;
13 }
14 </style>
15</head>
16<body>
17<div id="js-load" class="main">
18 <ul class="lists">
19 <li class="lists__item js-load">11111</li>
20 <li class="lists__item js-load">txttxttxttxttxttxt</li>
21 <li class="lists__item js-load">11111</li>
22 <li class="lists__item js-load">txttxttxttxttxttxt</li>
23 <li class="lists__item js-load">11111</li>
24 <li class="lists__item js-load">txttxttxttxttxttxt</li>
25 <li class="lists__item js-load">11111</li>
26 <li class="lists__item js-load">txttxttxttxttxttxt</li>
27 <li class="lists__item js-load">11111</li>
28 <li class="lists__item js-load">txttxttxttxttxttxt</li>
29 <li class="lists__item js-load">11111</li>
30 <li class="lists__item js-load">txttxttxttxttxttxt</li>
31 <li class="lists__item js-load">11111</li>
32 <li class="lists__item js-load">txttxttxttxttxttxt</li>
33 <li class="lists__item js-load">11111</li>
34 <li class="lists__item js-load">txttxttxttxttxttxt</li>
35 <li class="lists__item js-load">11111</li>
36 <li class="lists__item js-load">txttxttxttxttxttxt</li>
37 <li class="lists__item js-load">11111</li>
38 <li class="lists__item js-load">txttxttxttxttxttxt</li>
39 </ul>
40</div>
41<!-- 追加ここから -->
42<div id="js-btn-wrap" class="btn-wrap">
43 <a class="btn">もっと見る</a>
44</div>
45<!-- 追加ここまで -->
46<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
47<script>
48 $(window).on('load', function () {
49 load('#js-load', '6');
50 $("#js-btn-wrap .btn").on("click", function () {
51 load('#js-load', '12', '#js-btn-wrap');
52
53 return false; // 追加
54 })
55 });
56
57 function load(id, cnt, btn) {
58 var girls_list = id + " .js-load:not(.active)";
59 var girls_length = $(girls_list).length;
60 var girls_total_cnt;
61 if (cnt < girls_length) {
62 girls_total_cnt = cnt;
63 } else {
64 girls_total_cnt = girls_length;
65 $(btn).hide();
66 }
67 $(girls_list + ":lt(" + girls_total_cnt + ")").addClass("active");
68 }
69</script>
70</body>
71</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/02 04:33
2017/10/06 09:59