javascript - 如何使用纯 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 ;)