Question

在这种情况下，如何更改下3个兄弟姐妹的班级？我想创建分页（每页3个元素）。

<button id="leftbutton"><</button>
<ul id="basepattern">
  <li class="baseshown">1</li>
  <li class="baseshown">2</li>
  <li class="baseshown">3</li>
  <li class="basehidden">4</li>
  <li class="basehidden">5</li>
  <li class="basehidden">6</li>
  <li class="basehidden">7</li>
  <li class="basehidden">8</li>
  <li class="basehidden">9</li>
</ul>
<button id="rightbutton">></button>

http://jsfiddle.net/KDyC9/

base_nextpage: function() {
   $(".baseshown").addClass("basehidden");
     $(".baseshown").nextAll(".basehidden:lt(3)").addClass("baseshown");
},

Answer 1

这是一种方法，例如移动到下一页：

$(".baseshown")
    .toggleClass("baseshown basehidden")  // toggle currently visible elements
    .last().nextAll().slice(0, 3)         // get elements that go into next page
    .toggleClass("baseshown basehidden"); // and toggle those as well

请注意，这并没有考虑当您已经在最后一页时会发生什么 - 您可以通过查看.length之后的.nextAll()或其他等效内容来检测到这一点。

Answer 2

这里是后退和前进的限制检查：

$('button').on('click', function () {

    var next = $(this).data().dir === 'next' ?        
        Math.min(currentPage + 1, numPages - 1) :
        Math.max(currentPage - 1, 0);

    load(currentPage = next);    
});

var load = function (page) {
    items.removeClass('shown');
    items.slice(page * pageSize, page * pageSize + pageSize).addClass('shown');;
};

http://jsfiddle.net/stto3703/44Nn9/

在这种情况下如何更改下3个兄弟姐妹的班级？

2 个答案: