騎自行車到節標籤：停止二段

Question

後，我有一組我通過使用jQuery試圖週期節標籤：

<ul id="office-nav"> 
<li class="prev"><a href="">Previous</a></li> 
<li>Next Location</li> 
<li class="next"><a href="">Next</a></li> 
</ul> 

<article id="offices"> 

<section class="office1"> 
<h3>Office 1</h3> 
</section><!--end office1--> 

<section class="office2"> 
<h3>Office 2</h3> 
</section><!--end office2--> 

<section class="office3"> 
<h3>Office 3</h3> 
</section><!--end office3--> 

</article><!--end offices--> 

的CSS：

#offices section{display:none;width:300px;height:300px;} 
#offices section.office1{display:block;background-color:red;} 
#offices section.office2{background-color:yellow;} 
#offices section.office3{background-color:orange;} 

這裏是我的jQuery ：

var visibleBox = $('#offices section:visible'); 
var nextToShow = $(visibleBox).next('section:hidden'); 

$("#office-nav li.next a").click(function(event) { 
    visibleBox.hide(); 
    if (nextToShow.length > 0) { 
     nextToShow.show(); 
    } else { 
     $('#offices section:hidden:first').show(); 
    } 
    event.preventDefault(); 
}); 

對我來說，這個循環週期可達.office2，但沒有任何過去。另外，我將如何重寫一個反向函數向後循環？

小提琴這裏：http://jsfiddle.net/pwb6D/2/

Answer 1

你只得到負載可見section元素，你需要更新click事件處理程序中的visibleBox和nextToShow變量。

地說：

var visibleBox = $('#offices section:visible'); 
var nextToShow = $(visibleBox).next('section:hidden'); 

的click事件處理中，因此每次都會被更新用戶點擊next/prev按鈕：

$("#office-nav li.next a").click(function(event) { 
    var visibleBox = $('#offices section:visible'); 
    var nextToShow = $(visibleBox).next('section:hidden'); 
    visibleBox.hide(); 
    if (nextToShow.length > 0) { 
     nextToShow.show(); 
    } else { 
     $('#offices section:hidden:first').show(); 
    } 
    event.preventDefault(); 
}); 

這裏是一個演示：http://jsfiddle.net/pwb6D/4/

UPDATE

您可以通過緩存所有section標籤和使用計數變量來跟蹤當前狀態的優化代碼位：

//cache all the sections, how many sections there are, and set the current section to the first (zero based index) 
var $all_sections = $('#offices').children('section'), 
    curr_section = 0, 
    section_count = $all_sections.length; 

//bind click event handler to "next" button 
$("#office-nav li.next a").click(function(event) { 

    //hide the section that was showing 
    $all_sections.eq(curr_section).hide(); 

    //increment the curr_section variable 
    curr_section++; 

    //check to make sure there is still another hidden section to show, if not reset the curr_section variable to zero 
    if (curr_section >= section_count) { 
     curr_section = 0; 
    } 

    //show the next section 
    $all_sections.eq(curr_section).show(); 

    //prevent the default click behavior of the "next" link 
    event.preventDefault(); 
}); 

這裏是一個演示：http://jsfiddle.net/pwb6D/5/

UPDATE

你可以使用這個相同的代碼進行一些調整來爲你的「prev」鏈接創建功能：

$("#office-nav .prev a").click(function(event) { 
    $all_sections.eq(curr_section).hide(); 

    //increment down instead of up 
    curr_section--; 

    //check if the new curr_section value is less than zero (instead of larger than the number of sections) 
    if (curr_section < 0) { 

     //reset curr_section variable to the last section 
     curr_section = (section_count - 1); 
    } 
    $all_sections.eq(curr_section).show(); 
    event.preventDefault(); 
}); 

Answer 2

您正在存儲第一個可見部分visibleBox。這不會被新近可見的部分取代。檢查下面的代碼來解決這個問題。

var Boxes = $('#offices'); 

$("#office-nav li.next a").click(function(event) { 

    var visibleBox = Boxes.find('section:visible'), // Find the visible section in article. 
     nextToShow = visibleBox.next(); // Get the next section to visible 

    visibleBox.hide(); 
    if (nextToShow.length > 0) { 
     nextToShow.show(); 
    } else { 
     $('#offices section:hidden:first').show(); 
    } 

    event.preventDefault(); 

}); 

Answer 3

這是一個比你現在使用的更容易的結構，不依賴於全局變量。

http://jsfiddle.net/CQGRL/1

$('.office:first').addClass('active'); //show first office 

$(".next a").click(function(event) { 
    //abort if this is the end of the list 
    if ($('.active').is('.office:last')) { return false; } 
    //find next office in list and make it active. then remove active class from current 
    $('.active').next('.office').addClass('active').end().removeClass('active'); 
    return false; 
}); 

$(".prev a").click(function(event) { 
    //abort if this is the end of the list 
    if ($('.active').is('.office:first')) { return false; } 
    //find previous office in list and make it active. then remove active class from current  
    $('.active').prev('.office').addClass('active').end().removeClass('active'); 
    return false; 
});