もっと見るjs スクリプトの問題点

こちらの
javscriptを使用して、もっと見るボタンの実装を試しているのですが、下記のスクリプトだと初期表示時のコンテンツにactiveが付与されません。
このjsが適切に動かない問題点が見える方、ご指導頂けましたら幸いです。

<!--//css-->
.js-load { display:none; }
.js-load.active { display:block; }

<!--//html-->
<div id="js-load" class="main">
	<ul class="lists">
		<li class="lists__item js-load">11111</li>
		<li class="lists__item js-load">txttxttxttxttxttxt</li>
	</ul>
</div>

<!--//js-->
$(window).on('load', function(){
	load('#js-load','6');
	$("#js-btn-wrap .btn").on("click",function(){
		load('#js-load','12','#js-btn-wrap');
	})
});
function load(id,cnt,btn){
	var girls_list   = id + " .js-load:not(.active)";
	var girls_length = $(girls_list).length;
	var girls_total_cnt;
	if( cnt < girls_length ){
		girls_total_cnt = cnt;
	} else {
		girls_total_cnt = girls_length;
		$(btn).hide();
	}
	$(girls_list + ":lt(" + girls_total_cnt +")").addClass("active");
}

行動規範の内容に同意します

回答1件

以下のようなコードを書いたところ、正常に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/01 19:11

s8_chu

総合スコア14731

samidare

2017/10/02 04:33

お時間を割いていただき、ありがとうございます。上記ソースを、プレーンのhtmlで試行したところ、うまくいきました。実はwordpressの既存サイトで、既にあるコンテンツ（ギャラリー/ photoswipe.js使用）に追加で利用したいと考えております。が、wpサイトに組み込むとjs自体は適用されていますがコンテンツが非表示（activeが効かないため、display:none状態）になってしまいます。そこで既存jsの競合が原因かと思い取り除いても状況は変わりませんでした。また、個別要素をlist以外に変更しても（figureなど）同じでした。このケースの場合、他に考えられるような原因など、ありますでしょうか…？js側が問題ないとなると、cssが悪さをしてるのかと考えていますが…。長くなってしまい、また、少々初歩的な質問になってしまい恐縮です。

s8_chu

2017/10/06 09:59

返信が遅れてしまいすみません。 > 実はwordpressの既存サイトで、既にあるコンテンツ（ギャラリー/ photoswipe.js使用）に追加で利用したいと考えております。私はWordPressについて明るくないので、私では解決できない問題のようです。WordPressについての質問であれば、新たにWordpressタグを付けて質問を投稿するとWordPressに詳しい方からの回答が得られると思います。

行動規範の内容に同意します