Question

我有几个同一类但不同ID的div

<div class='box' id='zz1'></div>
<div class='box' id='zz2'></div>
<div class='box' id='zz3'></div>
<div class='box' id='zz4'></div>
<div class='box' id='zz5'></div>

显示所有div：none只有第一个div可见。我想要的是如果我点击＃zz1然后它将隐藏并且#zz2将可见，如果我点击＃zz2它将隐藏并显示#zz3 ..我可以像这样使用条件

$('.box').click(function(){
$(this).hide();
var getId = $(this).attr('id'); 
if(getId == "zz1") {  $("#zz2").fadeIn(); }
if(getId == "zz2") {  $("#zz3").fadeIn(); }
if(getId == "zz3") {  $("#zz4").fadeIn(); }
if(getId == "zz4") {  $("#zz5").fadeIn(); }
});

我正在使用动态数据，div的数量会根据数据而改变，所以它不起作用是否有更好的方法来显示同一个类的下一个div ...谢谢

Answer 1

您可以使用jQuery <Image onLoad={event => { console.log(event.nativeEvent.source); }} source={require("./../assets/images/photo_1.jpg")} style={styles.image} /> // Would log { height: 123, url: 'somestring', width: 123 }方法。以下是文档链接 - https://api.jquery.com/next/

所以代码看起来像这样：

.next()

小提琴：https://jsfiddle.net/p8Lvu80f/

编辑：您当然应该添加一些条件，因此出于显而易见的原因，最后一个元素不会调用$('.box').click(function(){ $(this).hide(); $(this).next().fadeIn(); });，并且可能会重新开始。

Answer 2

我想出了点什么。如果用户点击最后一个孩子，则会再次显示第一个孩子。

$('.box').click(function() {
  $(this).index() == $('.box').length ? $('.box').first().fadeIn() : $(this).next().fadeIn();
  $(this).hide();
})

.box:not(:first-of-type) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box' id='zz1'>AA</div>
<div class='box' id='zz2'>BB</div>
<div class='box' id='zz3'>CC</div>
<div class='box' id='zz4'>DD</div>
<div class='box' id='zz5'>EE</div>

Answer 3

$('.box').click(function(){
 $(this).hide();
 var getId = $(this).attr('id'); 
 var idInt = parseInt(getId)+1;
 var idStr = getId.substring(0, getId.indexOf(idInt))+idInt;
 $("#"+idStr).fadeIn(); 
});

这将从点击的ID中提取整数，添加一个，构造一个新ID，并淡入新ID。

这适用于您发布的数据示例。

按ID显示班级顺序

3 个答案: