Question

＆＃13;

node

＆＃13;

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

＆＃13;

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

＆＃13;

我有一个div <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;"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> <div class="box"> 4 </div>和下一个按钮。如果我单击.box按钮但是只有第一个div不是全部，我需要选择下一个div。例如，如果我在显示next时单击next按钮，则应显示的下一个框为box 1，依此类推。但现在它显示2。怎么做？

Answer 1

您可以使用$(.box:visible)获取第一个可见div，然后使用fadeIn next div。您还可以添加最后一个元素的检查，在这种情况下，您可以淡入第一个元素。像这样的东西：

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

.box{
	border:solid 1px #ccc;
	padding: 20px;
	width:10%;
	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;">
	1
</div>

<div class="box">
	2
</div>

<div class="box">
	3
</div>

<div class="box">
	4
</div>

Answer 2

它显示2 3 4因为您要选择所有 .box元素，即1 2 3 4

.next() = 1

的

2 .next() = 2

的

3 .next() = 3

的

4 .next() =没有

的

4

你应该找到当前正在显示的框，然后找到它的下一个兄弟。

// 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();

Answer 3

你可以使用另一个标记的类，显示在哪个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/

Answer 4

如果我理解你的要求，这将有效

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

Answer 5

尝试以下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/

用jquery选择下一个div？

5 个答案: