javascript - 激活当前分页按钮

Question

我有一个分页。我需要在分页中设置当前链接的样式。为此，我需要向当前链接添加一个“active”类，以便我可以使用 css 对其进行样式设置

这是我的javascript:

var itemsNumber = 6, $items, pages = 1, current = 1;
function makePages(){
    $items = $(".filtered-div:visible");
    pages = Math.ceil($items.length / itemsNumber);
    $("#pages").empty();
    for(var p=1;p<=pages;p++){
          $("#pages").append($('<a href="#">'+p+'</a>'));
    }
    showPage(1);
}
function showPage(page){
    $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
    current = page;
$("div.ctrl-nav a").show();
    if(current == 1){
        $("div.ctrl-nav a:first").hide();
    }else if(current == pages){
        $("div.ctrl-nav a:last").hide();
    }
}
makePages();
$("div.ctrl-nav").on('click', 'a', function(){
    var action = $(this).text();
    if(action == 'Précédent'){
        current--;
    }else if(action == 'Suivant'){
        current++;
    }else if(+action > 0){
        current = +action;
    }
    if(current <= 1){
        current = 1;
    }else if(current >= pages){
        current = pages;
    }
    showPage(current);
 
});

这是我的 HTML:

<div id="item-wrapper">
    <div class="filtered-div" data-tag="['category-1']">item 1</div>
    <div class="filtered-div" data-tag="['category-1']">item 2</div>
    <div class="filtered-div" data-tag="['category-2']">item 8</div>
    <div class="filtered-div" data-tag="['category-2']">item 9</div>
    <div class="filtered-div" data-tag="['category-2']">item 10</div>
    <div class="filtered-div" data-tag="['category-2']">item 11</div>
    <div class="filtered-div" data-tag="['category-2']">item 12</div>
   
    <div class="ctrl-nav">
        <a href="#">Précédent</a><span id="pages"></span><a href="#">Suivant</a>
    </div>
    </div>

这是一个代码笔:Codepen

有什么建议吗？感谢您的帮助

Answer 1

您的分页按钮已添加到 ID 为 pages 的 div 中，因此您可以通过以下方式引用当前页面:

$("#pages a").eq(current - 1)

因为您的“页面”(当前)值是从 1 开始的，但是 .eq 是从 0 开始的，它需要是 -1.

从 codepen 中获取更完整的代码并将 active 添加到当前页面链接给出:

var itemsNumber = 6,
  $items, pages = 1,
  current = 1;

function makePages() {
  $items = $(".filtered-div:visible");
  pages = Math.ceil($items.length / itemsNumber);
  $("#pages").empty();
  for (var p = 1; p <= pages; p++) {
    $("#pages").append($('<a href="#">' + p + '</a>'));
  }
  showPage(1);
}

function showPage(page) {
  $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
  current = page;
  $("div.ctrl-nav a").show();
  if (current == 1) {
    $("div.ctrl-nav a:first").hide();
  } else if (current == pages) {
    $("div.ctrl-nav a:last").hide();
  } 
  $("div.ctrl-nav a.active").removeClass("active");
  $("#pages a").eq(current - 1).addClass("active"); 
}

makePages();

$("div.ctrl-nav").on('click', 'a', function() {
  var action = $(this).text();
  if (action == 'Précédent') {
    current--;
  } else if (action == 'Suivant') {
    current++;
  } else if (+action > 0) {
    current = +action;
  }
  if (current <= 1) {
    current = 1;
  } else if (current >= pages) {
    current = pages;
  }
  showPage(current);

});


var $myitems = $('.filtered-div');
$('.btn-container').on('click', '.btn', function() {
  var value = $(this).data('filter');
  if (value == "all") {
    $myitems.show();
  } else {
    var $selected = $myitems.filter(function() {
      return $(this).data('tag').indexOf(value) != -1;
    }).show();
    $myitems.not($selected).hide();
  }
  $(this).addClass('active').siblings().removeClass('active');
  makePages();
});

.ctrl-nav {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  padding: 1rem 0;
  justify-content: center;
}
.ctrl-nav a {
  text-decoration: none;
  font-size:16px;
  margin: 0 0.25rem;
  padding:5px 10px;
}
.ctrl-nav a.active{
  border-radius:8px;
  background-color: #0085b6;
  color: white;
}
.ctrl-nav a#prev{
 float:left; 
}
.ctrl-nav a#next{
 float:right;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="btn-container">
   <button class="btn active" data-filter="all">Show  All</button>
   <button class="btn" data-filter="category-1">Category 1</button>
   <button class="btn" data-filter="category-2">Category 2</button>
</div>

<div id="item-wrapper">
    <div class="filtered-div" data-tag="['category-1']">item 1</div>
    <div class="filtered-div" data-tag="['category-1']">item 2</div>
    <div class="filtered-div" data-tag="['category-1']">item 3</div>
    <div class="filtered-div" data-tag="['category-1']">item 4</div>
    <div class="filtered-div" data-tag="['category-1']">item 5</div>
    <div class="filtered-div" data-tag="['category-1']">item 6</div>
    <div class="filtered-div" data-tag="['category-2']">item 7</div>
    <div class="filtered-div" data-tag="['category-2']">item 8</div>
    <div class="filtered-div" data-tag="['category-2']">item 9</div>
    <div class="filtered-div" data-tag="['category-2']">item 10</div>
    <div class="filtered-div" data-tag="['category-2']">item 11</div>
    <div class="filtered-div" data-tag="['category-2']">item 12</div>
    <div class="filtered-div" data-tag="['category-1']">item 13</div>
    <div class="filtered-div" data-tag="['category-1']">item 14</div>
    <div class="filtered-div" data-tag="['category-2']">item 15</div>


<div class="ctrl-nav">
<a href="#">Précédent</a><span id="pages"></span><a href="#">Suivant</a>
</div>
</div>