javascript - Jribbble - 如何一次加载 6 个镜头

Question

我对 Javascript 有点陌生，但我已经设法将一些内容加载到页面上，这是一个开始。

我尝试使用此脚本将 6 个“镜头”加载到页面，但目前它已将它们全部加载:

<script type="text/javascript">


$(document).ready(function getDribbbleShots() {   
  $.jribbble.getShotsByPlayerId('abenjamin765', function (playerShots) {
      var html = [];



      $.each(playerShots.shots, function (i, shot) {
          var str = (''+shot.description+'');
          html.push('<div class="col-md-4"><div class="thumbnail"><a href="' +shot.image_url+ '" target="_blank">');
          html.push('<img class="shot-image" src="' + shot.image_url + '" ');
          html.push('alt="' + shot.title + '"></a>');
          //html.push('<div class="caption"><h4>'+ shot.title +'</h4>');
          //html.push('<div class="ellipsis">'+shot.description+'</div>');
          html.push('<p class="imgTitle"><a href="'+shot.url+'" class="btn btn-primary">' + shot.title + '</a></p></div></div></div>');
      });
      $('.dribbble-feed').html(html.join(''));
      //$( ".ellipsis p" ).addClass( "ellipsis" );

  }, {page: 1, per_page: 9});
});

</script>

我还想引入一个“加载更多”按钮，一次加载 3 个镜头。

任何帮助将不胜感激:)

• 干杯

Answer 1

如果您使用playerShots.shots.slice(0, 2)，则循环将仅执行前三个“镜头”。

文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

就加载更多内容而言，您需要将 API 响应的结果保存到代码可访问的变量中，以显示更多“镜头”。