用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？

回答

相關問題