使用上一个/下一个按钮循环显示多个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();
});

小提琴：https://jsfiddle.net/g1r0ws6w/2/

Answer 1

这里是fiddle。您需要的只是++ c / - c，您需要添加/减去d值。

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

Answer 2

你可以这样做

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

Answer 3

要始终显示彼此相邻的4个div，您需要在sapply(train[-1], function(x) length(unique(train$UNSPSC[x==1]))) 方法中提高步数，同时显示多个项目。我为此目的使用了for循环。 结论您需要调整条件以相应地显示/隐藏下一个按钮。

click()

这是相应的fiddle。

Answer 4

我添加paging作为默认号码显示（您可以设置任何数字）。 c and d将是您当前偏移的当前开始和结束索引。

＆＃13;

＆＃13;

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

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

$prNx.click(function(){
  if($(this).hasClass('next')) {
  	c += paging;
  	d += paging;
  } else {
    c -= paging;
    d -= paging;
  }
  toggView();
});

＆＃13;

.childclass {
height: 100px;
display: inline-block;
background: #e3e3e3;
margin: 10px;
}

.current { display: block; }


.childclass { clear: none !important;
display: inline-block;
white-space: nowrap;
	width: 25% !Important;
	float: none;
}

.parent {
	overflow-x: hidden;
overflow-y: hidden;
  white-space: nowrap !Important;
	width: 100%;
	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="childclass">
some content 10
</div>
<div class="childclass">
some content 11
</div>
</div>

＆＃13;

＆＃13;

＆＃13;