如何使用纯 javascript 而不是 jquery 构建加载更多 <li> 函数

Question

我在 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>

Answer 1

这是您提供的 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 的代码； )