自定义插件中的分页Wordpress(Javascript)

时间:2018-07-11 12:17:52

标签: wordpress

您好,我希望有人可以提供帮助。我正在构建一个wordpress插件。我只是具有php的基本知识,我设法建立了除分页之外的整个插件。我已经使用JavaScript尝试了很多代码,但没有一个对我有用。 Here is the image. I want to divide the items with pagination

提前谢谢!

1 个答案:

答案 0 :(得分:0)

一种好的方法是考虑诸如标签之类的页面。然后,页面链接的行为类似于根据单击的页面链接显示/隐藏的按钮。

这是使用jQuery的示例

// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
  // Save the page number that was clicked
  var pageNum = $(this).data('page-id')

  // Hide any open 'pages'
  $('.page-content').hide();

  // Find and show the selected page
  $('[data-page=' + pageNum + ']'').show();
});

要使其正常工作,您需要一个类似以下的HTML结构

<!-- The Page Link -->
 <div>
  <ul>
     <li class="page-link" data-page-id="1">Page 1</li>
     <li class="page-link" data-page-id="2">Page 2</li>
     <li class="page-link" data-page-id="3">Page 3</li>
  </ul>

 <!-- The Page Content -->
    <div class="page-content" data-page="1" style="display: none;">
          Page 1 content
     </div> 
     <div class="page-content" data-page="2"  style="display: none;">
          Page 2 content
      </div>    
     <div class="page-content" data-page="3"  style="display: none;">
         Page 3 content
     </div>
 </div>

这是一个超级基本的jsfiddle