gpt4 book ai didi

javascript - 如何使用纯 javascript 而不是 jquery 构建加载更多
  • 函数
  • 转载 作者:太空宇宙 更新时间:2023-11-03 21:28:50 25 4
    gpt4 key购买 nike

    我在 codepen 中发现了这段很棒的代码:http://codepen.io/joe-watkins/pen/wBYbgN

    但我正在尝试使用纯 javascript 来获得相同的功能,有谁知道这是否可能,我该如何实现 😉

    非常感谢

    var $parent = $("ul"),
    $items = $parent.find("li"),
    $loadMoreBtn = $("#load-more-comments"),
    maxItems = 10,
    hiddenClass = "visually-hidden";

    // add visually hidden class to items beyond maxItems
    $.each($items, function(idx,item){
    if(idx > maxItems - 1){
    $(this).addClass(hiddenClass);
    }
    });

    // onclick of show more button show more = maxItems
    // if there are none left to show kill show more button
    $loadMoreBtn.on("click", function(e){
    $("."+hiddenClass).each(function(idx,item){
    if(idx < maxItems - 1){
    $(this).removeClass(hiddenClass);
    }
    // kill button if no more to show
    if($("."+hiddenClass).size() === 0){
    $loadMoreBtn.hide();
    }
    });
    });
    body {
    margin: 1em;
    }

    .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    </ul>

    <button id="load-more-comments">Load More</button>

    最佳答案

    这是您提供的 js 代码的快速普通版本

    // cache vars

    var parent = document.querySelector('ul'),
    items = parent.querySelectorAll('li'),
    loadMoreBtn = document.querySelector('#load-more-comments'),
    maxItems = 10,
    hiddenClass = "visually-hidden";


    [].forEach.call(items, function(item, idx){
    if (idx > maxItems - 1) {
    item.classList.add(hiddenClass);
    }
    });

    loadMoreBtn.addEventListener('click', function(){

    [].forEach.call(document.querySelectorAll('.' + hiddenClass), function(item, idx){
    console.log(item);
    if (idx < maxItems - 1) {
    item.classList.remove(hiddenClass);
    }

    if ( document.querySelectorAll('.' + hiddenClass).length === 0) {
    loadMoreBtn.style.display = 'none';
    }

    });

    });

    使用纯 js 的 codepen:

    http://codepen.io/anon/pen/gpxPmN

    事情是这样的,jquery 解决了不同浏览器在添加事件处理程序、ajaxing、查询 DOM 等方面的不一致,所以这绝对是使用它的优势,尤其是当你试图编写代码时支持 IE ;)

    关于javascript - 如何使用纯 javascript 而不是 jquery 构建加载更多 <li> 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30835881/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com