Bootstrap 使用引导分页和jquery交换页面中的div

mm5n2pyu 于 2023-02-06 发布在 Bootstrap

关注(0)|答案(2)|浏览(152)

我正在尝试在我的网页上使用Bootstrap分页。基于所有在线可用的东西，我已经从在线可用的东西中拿出了下面的代码。我需要的是能够在同一页面上交换div。这个脚本中的问题发生在早期，我的currentpage变量未定义，也无法找到activePage。我用过$(".pagination-container").data('page')和$(this).data('page')，都返回undefined。如果有人能看一下这个脚本，并给予如何使它工作的必要指示，我会很高兴。

<script>
var paginationHandler = function(){
  $('.page_control li').unbind('click', paginationHandler);
  var currentPage   = $(this).data('page');
      var   activePage   = $(this).parent().find('.active').data('page');
        var num_elements   = $(this).parent().children().length;
// This equals the first data-page value after the < button.
        var start    = 1;
 // This is the end of the actual pages, remember it is offset by the < and > buttons.
        var end     = num_elements-2;
  if(currentPage === '+' ){
      (activePage < end) ? currentPage = activePage + 1 : currentPage = start;
  }

  if(currentPage === '-'){
      (activePage > start) ? currentPage = activePage - 1 : currentPage = end;
  }
// Remove the active class to the li
  $(this).parent().find('.active').removeClass('active');

// Add the active class to the appropriate li taking
          $(this).parent().find('li[data-page*=' + currentPage + ']').addClass('active');

$(this).parents("div .pagination-container").find('div[data-page*=' + activePage + ']').fadeOut('fast', function(){
       $(this).parents("div .pagination-container").find('div[data-page*=' + currentPage + ']').fadeIn('fast');
  $('.page_control li').bind('click', paginationHandler);
  });
};
$( document ).ready( paginationHandler );
</script>

这是我的HTML：

<div class="pagination-container" >
<div data-page="1" >
      <p>Content for Div Number 1</p>
   </div>
   <div data-page="2" style="display:none;">
      <p>Content for Div Number 2</p>
   </div>
   <div data-page="3" style="display:none;">
      <p>Content for Div Number 3</p>
   </div>
   <div data-page="4" style="display:none;">
      <p>Content for Div Number 4</p>
   </div>
   <div data-page="5" style="display:none;">
      <p>Content for Div Number 5</p>
   </div>

   <div class="pagination pagination-centered pagination-large" style="position:absolute; bottom:0;">
       <ul class="page_control ">
            <li data-page="-" ><a href="#" >&lt;</a></li>
            <li class="active" data-page="1">
                <a href="#" >1</a>
            </li>
            <li data-page="2"><a href="#" >2</a></li>
            <li data-page="3"><a href="#" >3</a></li>
            <li data-page="4"><a href="#" >4</a></li>
            <li data-page="5"><a href="#" >5</a></li>
            <li data-page="+"><a href="#" >&gt;</a></li>
      </ul>
   </div>

</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/32211121/use-bootstrap-pagination-and-jquery-to-swap-divs-in-a-page

2条答案

按热度按时间

bbuxkriu1#

下面是根据HTML结构调整后的脚本。

<script>
var paginationHandler = function(){
    // store pagination container so we only select it once
    var $paginationContainer = $(".pagination-container"),
        $pagination = $paginationContainer.find('.pagination ul');

    // click event
    $pagination.find("li a").on('click.pageChange',function(e){
        e.preventDefault();

        // get parent li's data-page attribute and current page
        var parentLiPage = $(this).parent('li').data("page"),
            currentPage = parseInt( $(".pagination-container div[data-page]:visible").data('page') ),
            numPages = $paginationContainer.find("div[data-page]").length;

        // make sure they aren't clicking the current page
        if ( parseInt(parentLiPage) !== parseInt(currentPage) ) {
            // hide the current page
            $paginationContainer.find("div[data-page]:visible").hide();

            if ( parentLiPage === '+' ) {
                // next page
                $paginationContainer.find("div[data-page="+( currentPage+1>numPages ? numPages : currentPage+1 )+"]").show();
            } else if ( parentLiPage === '-' ) {
                // previous page
                $paginationContainer.find("div[data-page="+( currentPage-1<1 ? 1 : currentPage-1 )+"]").show();
            } else {
                // specific page
                $paginationContainer.find("div[data-page="+parseInt(parentLiPage)+"]").show();
            }

        }
    });
};
$( document ).ready( paginationHandler );
</script>

下面是一个JS Fiddle来展示它的工作原理：https://jsfiddle.net/x2tqujzz/2/
希望能有所帮助！

赞(0）回复(0）举报 2023-02-06

qij5mzcb2#

更新以包括导航UI选择器活动状态

var paginationHandler = function(){
  // store pagination container so we only select it once
  var $paginationContainer = $(".pagination-container"),
      $pagination = $paginationContainer.find('.pagination ul');

  // click event
  $pagination.find("li a").on('click.pageChange',function(e){
      e.preventDefault();

      // get parent li's data-page attribute and current page
      var parentLiPage = $(this).parent('li').data("page"),
          currentPage = parseInt( $(".pagination-container div[data-page]:visible").data('page') ),
          numPages = $paginationContainer.find("div[data-page]").length;

      // make sure they aren't clicking the current page
      if ( parseInt(parentLiPage) !== parseInt(currentPage) ) {
          // hide the current page
          $paginationContainer.find("div[data-page]:visible").hide();
          
          // update UI
          $('.pagination ul li.active').removeClass('active');          

          if ( parentLiPage === '+' ) {
            var nextPage = (currentPage+1 == numPages+1) ? currentPage : currentPage+1;
            $paginationContainer.find("li[data-page="+nextPage+"]").addClass('active');

            $paginationContainer.find("div[data-page="+( nextPage>numPages ? numPages : nextPage )+"]").show();              

          } else if ( parentLiPage === '-' ) {
            var prevPage = (0 == currentPage-1) ? currentPage : currentPage-1;
            $paginationContainer.find("li[data-page="+prevPage+"]").addClass('active');
            $paginationContainer.find("div[data-page="+( prevPage<1 ? 1 : prevPage )+"]").show();

          } else {
              // specific page
              $paginationContainer.find("div[data-page="+parseInt(parentLiPage)+"]").show();
              $(this).parent('li').addClass('active');
          }
      }
  });
};
$( document ).ready( paginationHandler );

赞(0）回复(0）举报 2023-02-06

我来回答

Bootstrap 使用引导分页和jquery交换页面中的div

2条答案

相关问题

热门标签

最新问答