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

Question

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

提前谢谢你！

Answer 1

一个好的方法是将页面考虑为标签。然后页面链接的行为就像按钮一样，根据点击的页面链接显示/隐藏。

这是一个使用 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