用jquery选择下一个div？

//$(document).ready(function(){ 
 
\t $('.next').click(function(){ 
 
\t \t $('.box').fadeOut(); 
 
\t \t $('.box').next().fadeIn(); 
 
\t }); 
 
//});

.box{ 
 
\t border:solid 1px #ccc; 
 
\t padding: 20px; 
 
\t width:10%; 
 
\t display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="next" style="cursor:pointer;">next</a> <br><br> 
 
<div class="box" style="display:block;"> 
 
\t 1 
 
</div> 
 

 
<div class="box"> 
 
\t 2 
 
</div> 
 

 
<div class="box"> 
 
\t 3 
 
</div> 
 

 
<div class="box"> 
 
\t 4 
 
</div>

我有一个div .box，下一个按钮。我需要选择下一个div，如果我点击next按钮但只有第一个div不是全部。例如，如果我点击next按钮，而它显示box 1那么应该出现的下一个框是2依此类推。但现在它显示2 3 4。这个怎么做？

来源

2017-07-27 Reynald Henryleo

您可以使用$(.box:visible)获得第一个可见div，然后在接下来的div中淡入。您还可以添加对最后一个元素的检查，在这种情况下，您可以淡入第一个元素。是这样的：

//$(document).ready(function(){ 
 
\t $('.next').click(function(){ 
 
     var visibleBox = $('.box:visible'); 
 
\t \t $(visibleBox).fadeOut(); 
 
\t \t if(!$(visibleBox).next('div').length) 
 
      $('.box').first().fadeIn(); 
 
     else 
 
      $(visibleBox).next().fadeIn(); 
 
      
 
\t }); 
 
//});

.box{ 
 
\t border:solid 1px #ccc; 
 
\t padding: 20px; 
 
\t width:10%; 
 
\t display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="next" style="cursor:pointer;">next</a> <br><br> 
 
<div class="box" style="display:block;"> 
 
\t 1 
 
</div> 
 

 
<div class="box"> 
 
\t 2 
 
</div> 
 

 
<div class="box"> 
 
\t 3 
 
</div> 
 

 
<div class="box"> 
 
\t 4 
 
</div>

来源

2017-07-27 02:52:36 Dij

我想第3盒后，第二盒后第3盒，和第4箱。怎么做先生？ –

谢谢先生@Dij –

它显示2 3 4因为你战神选择ALL.box元素，即1 2 3 4

的1 = 2

的 = 3

的3 = 4

的4 =什么.next().next()

你应该找到当前正在显示的对话框，然后发现它是一个同级。

// Filter by CSS rule 
var $showing = $('.box').filter(function() { 
    return $(this).css('display') === 'block'; 
}).fadeOut(); 

// or using :visible 
$showing = $('.box:visible').fadeOut(); 

$showing.next().fadeIn();

来源

2017-07-27 02:56:55

谢谢先生@克里斯林 –

您可以使用另一个类来标记，哪个div在显示屏上。例如，您添加了一个类display。那么你把这堂课放在第一个盒子里。当你点击下一步时，你可以从当前的类中移除类的显示，并将它移到下一个类。

HTML

<a class="next" style="cursor:pointer;">next</a> <br><br> 
<div class="box display"> 
    1 
</div> 

<div class="box"> 
    2 
</div> 

<div class="box"> 
    3 
</div> 

<div class="box"> 
    4 
</div>

CSS

.box{ 
    border:solid 1px #ccc; 
    padding: 20px; 
    width:10%; 
    display:none; 
} 
.display{ 
    display:block 
}

JQuery的

$('.next').click(function(){ 
    var current = $('.box.display'); 

current.fadeOut().removeClass('display').next().fadeIn().addClass('display'); 
});

演示：https://jsfiddle.net/dfaLnsmo/

来源

2017-07-27 02:57:05 Mark

谢谢先生@mark –

@ReynaldHenryleo您的欢迎。祝你今天愉快 – Mark

如果我理解你的要求，这将工作

$(document).ready(function(){ 
    var i = 1; 
    $('.next').click(function(){ 
     $('.box').fadeOut(); 
     $('.box:nth-child(i)').fadeIn(); 
     if(i >= $('.box').length) 
     i++; 
     else 
     i=1; 
    }); 
});

来源

2017-07-27 03:02:01 srinivas

请尝试以下的Jquery

var curr = 1; 
$('.next').click(function(){ 
    if(curr < $(".box").length) { 
    $('.box').hide(); 
    $(".box")[curr].style.display= "block"; 
    curr += 1; 
    } 
});

这里是工作jsfiddel：https://jsfiddle.net/Lv7yr820/1/

来源

2017-07-27 03:53:06 selvarajmas

用jquery选择下一个div？

回答

相关问题