4

リスト付きのdivボックスがあり、 3 つのアイテムを 1 つ下に表示し、リストから別の 3 つのアイテムulを表示したいと考えています。lislidetoggle

たとえば、ul私の場合は 9 つliのアイテムがありますが、最初に 3 つのアイテムのみを表示し、次のボタンをクリックすると次の 3 つが表示され、前のボタンをクリックするとリストの最後の 3 つが表示されます。

これは可能ですか?

私のサンプルコード:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
</ul>
4

3 に答える 3

5

$('.itemsList').each(function() {
  
  const group = 3; // group 3 by 3
  const $items = $(this).find('li');
  const $btns = $(this).find('.prev, .next');
  const max = Math.ceil($items.length / group);
  let c = 0;
  
  function showItems(ev) {
    c = c<0 ? max-1 : c%max;
    $items.hide().slice(group*c, group*c+group).show();
  }
  
  $btns.on('click', function() {
    $(this).is('.next') ? ++c : --c;
    showItems();
  });
  
  showItems(); // init
});
<div class="itemsList">
  <ul id="myList">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
  </ul>
  <button type="button" class="prev">prev</button>
  <button type="button" class="next">next</button>
</div>

<div class="itemsList">
  <ul id="myList">
    <li>item 1 (Example with 5 items)</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
  <button type="button" class="prev">prev</button>
  <button type="button" class="next">next</button>
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

于 2012-07-21T01:16:41.170 に答える
1

このようなものはどうですか

ここでjsFiddle

$('#next').click(function(){
    var index = $('ul li:visible').last().index() +2
    $('ul li:visible').slideUp().last().nextUntil(':nth-child('+index+'n+3)').slideDown();
})
于 2012-07-21T00:41:45.693 に答える
0

次のようなことができます:

var showNumber = 3;
var startPos = 0;
var endPos = showNumber;
var $List = $('ul li');
$List.hide().slice(startPos ,endPos).fadeIn();


$('a').click( function() {
    startPos = startPos + showNumber;
    endPos = endPos + showNumber;
    $List.hide().slice(startPos ,endPos).fadeIn();
    return false;
});

参照: http://jsfiddle.net/YURck/

基本的には、一度に表示する数 (showNumber) を設定し、スライスの開始インデックスと終了インデックスを決定します。

それを拡張するには、長さをチェックして、要素の最後のセットであるときに「次の」リンクを非表示にすることができます。

それが役に立てば幸い :)

于 2012-07-21T00:31:06.717 に答える