Question

我差不多用我正在编写的脚本，但是一旦我到达列表的末尾，我需要一种方法来知道我已经到达终点并且下一个按钮需要带我回到列表并添加.itemBox和itemHeader类返回各自的元素。这是我到目前为止的代码：

<code>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>var itemText = $('div.itemDescription').children().not('h3');
        //hide item text when page loads.
        itemText.hide();
        //set all div.itemDescriptions to have Aria-expanded attribute set to false.
        var itemDivs = $('div.itemDescription');
        for(i=0;i<itemDivs.length;i++)
        {
            $(itemDivs[i]).attr("aria-expanded",false);
        }
        var resetBox = itemDivs;
        //when user clicks link, have the benefit text appear if hidden and hide if shown.
        $('h3.itemHeader').click(function(){
            var theDiv = $(this).closest('div.itemDescription');
            var itemContent = theDiv.children().not('h3');
            itemContent.show();
            $(this).addClass('expanded');

            //when expanded, set ARIA expanded to true; Set to FALSE when not expanded.
            if($(this).hasClass('expanded'))
            {
                $(this).parent().attr("aria-expanded",true);
                //remove class from h3
                $(this).removeClass('itemHeader');
                //unbind to stop further clicks on h3
                //$(this).unbind('click');
                theDiv.parent().removeClass('itemBox');
                theDiv.prevAll().hide();
                theDiv.nextAll().hide();

            }
            else if ($(this).hasClass('expanded')==false)
            {
                $(this).parent().attr("aria-expanded",false);
                $(this).removeClass('expanded');

            }
        })//end click.

        // next button functionality
        $('a.btn-next').click(function(){


            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var nextItem = $(this).parents('div.itemDescription').next();


                nextItem.show();
                //expand contents of next div
                nextItem.attr("aria-expanded",true);
                nextItem.children('h3').removeClass('itemHeader');

                nextItem.children().show();

        })//end next click

        $('a.btn-prev').click(function(){

            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var prevItem = $(this).parents('div.itemDescription').prev();
            prevItem.show();

            //expand contents of next div
            prevItem.attr("aria-expanded",true);
            prevItem.children('h3').removeClass('itemHeader');

            prevItem.children().show();

        })//end prev click
</script>
<style>
.itemBox {
    border: 1px solid #333;
    padding: 2em;
}
.itemHeader {
    color: blue;
    text-decoration: underline
}
</style>

</head>
<body>
<div class="itemBox">
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 1</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 2</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 3</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 4</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 5</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
</div><!-- /.itemBox -->
</body>
</html>
</code>

Answer 1

诀窍是，如果有下一个（）或不是

这应该有效

    var nextItem = $(this).parents('div.itemDescription').next();
    /* if no length it doesn't exist*/
    if( ! nextItem.length ) {
        nextItem=$(this).parents('div.itemDescription:first')
    }

不是问题的一部分，但不需要此循环

  var itemDivs = $('div.itemDescription');
    for(i=0;i<itemDivs.length;i++)
    {
        $(itemDivs[i]).attr("aria-expanded",false);
    }

jQuery将处理同样的事情：

 var itemDivs = $('div.itemDescription').attr("aria-expanded",false);

如何next（）直到没有其他项目，然后返回列出项目的原始状态

1 个答案: