循环通过路段标记:在第二个路段后停止

Cycling Through Section tags: Stops After 2nd Section

本文关键字：第二个路 过路 段标记 循环      更新时间：2023-09-26

我有一组节标记，我正试图使用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，但没有超过这个周期。此外，我该如何重写反向函数以向后循环？

Fiddle here：http://jsfiddle.net/pwb6D/2/

如果只在加载时获得可见的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/

更新

您可以通过缓存所有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/

更新

您可以使用相同的代码进行一些调整，为您的"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();
});

您正在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();
});

这是一个比当前结构更容易使用的结构，并且不依赖于全局变量。

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;
});
相关文章：