javascript - 使用上一个/下一个按钮循环浏览多个 div

Question

现在每次点击循环 1 个 div - 是否可以每次点击循环 4 个 div？完全被难住了......

HTML:

<div class="outside-buttons">
<div class="prev">Previous</div>
<div class="next">Next</div>
</div>

<div class="parent">
<div class="childclass">some content</div>
<div class="childclass">some content 2</div>
<div class="childclass">some content 3</div>
<div class="childclass">some content 4</div>
<div class="childclass">some content 5</div>
<div class="childclass">some content 6</div>
<div class="childclass">some content 7</div>
<div class="childclass">some content 8</div>
<div class="childclass">some content 9</div>
</div>

jQuery:

var $zDiv = $('.childclass'),
    $prNx = $('.prev, .next'),
    $btns = $('.zanc > a'),
    n = $zDiv.length,
    c = 0; // current
    d = 4; //number of items

function toggView(){ 
  // content:
  $zDiv.hide().eq(c).show(); 
  // buttons:
  $prNx.show();
 if(c<=0){
    $('.prev').hide(); 
  }
  if(c>=n-1){
    $('.next').hide(); 
    } 
}
toggView();

$prNx.click(function(){ 
  c = $(this).hasClass('next') ? ++c : --c;
  toggView();
});

$btns.click(function( e ){
   c = $(this).index();
   toggView();
});

fiddle :https://jsfiddle.net/g1r0ws6w/2/

Answer 1

要始终显示彼此相邻的 4 个 div，您需要提高 click() 方法中的步长，同时显示多个项目。为此我使用了 for 循环。结论 您需要相应地调整显示/隐藏下一个按钮的条件。

var $zDiv = $('.childclass'),
    $prNx = $('.prev, .next'),
    $btns = $('.zanc > a'),
    n = $zDiv.length,
    c = 0; // current
    d = 4; //number of items

function toggView(){ 
  // content:
  $zDiv.hide();
  for(i=0;i<d && i+c<n;i++){
    $zDiv.eq(i+c).show(); 
  }
  // buttons:
  $prNx.show();
  if(c<=0){
    $('.prev').hide(); 
  }
  if(c+3>=n-1){
    $('.next').hide(); 
  } 
}
toggView();

$prNx.click(function(){ 
  c = $(this).hasClass('next') ? c += 4 : c -= 4;
  toggView();
});

$btns.click(function( e ){
   c = $(this).index();
   toggView();
});

这是对应的fiddle .