もっとみる機能の実装メモ

function view_img() {
    const more_view = document.getElementsByClassName("js-more--view_target")[0];
    const more_number = more_view.querySelectorAll(".js-more_number");

    const more_target = more_view.getElementsByTagName("li");
    const more_target__arr = Array.prototype.slice.call(more_target);
    const morebtn = document.getElementsByClassName("js-more--view")[0];
    const active_items = "active";
    const none_items = "js-none--view";
    const len = more_target__arr.length;
    const max_view = 6;
    let i = 0;

    const BODY = document.getElementsByTagName("body");

    if (BODY[0].className === "page-top") {
        let more_number_push = (() => {
            for (let rank = 0; rank < more_number.length; rank++) {
                let createDIV = document.createElement("div");
                let createP = document.createElement("p");

                let rank_num = `${rank + 1}`;

                if (rank < 3) {
                    createP.setAttribute("class", "more_number--style ranking" + rank_num);
                } else {
                    createP.setAttribute("class", "more_number--style ranking_etc");
                }

                createDIV.setAttribute("class", "more_number");
                createP.innerHTML = `${rank + 1}`;
                createDIV.appendChild(createP);
                more_number[rank].appendChild(createDIV);
            }
        })();
    }

    while (i < max_view) {
        more_target__arr[i].classList.add(active_items);
        i++;
    }

    if (len <= max_view) {
        morebtn.classList.add(none_items);
    }


    let more_view_fun = (e) => {

        let j = 0;
        let more_view_push = [];
        while (j < len) {
            if (!more_target__arr[j].classList.contains(active_items)) {
                more_view_push.push(more_target__arr[j]);
            }
            j++;

        }

        const more_view_slice = more_view_push.slice(0, 6);

        if (more_view_push.length >= 0) {
            for (let items = 0; item_len = more_view_slice.length, items < item_len; items++) {
                more_view_push[items].classList.add(active_items);
            }
        }

    };

    morebtn.addEventListener("click", (e) => {
        more_view_fun();

        for (let i = 0; i < len; i++) {
            if (more_target__arr[len - 1].classList.contains(active_items)) {
                morebtn.classList.add(none_items);
            }
        }

    }, false);

}

マックス6個までの要素を表示