为什么 Jquery .prev() 比 .next() 多显示 1 个元素？

Question

我正在创建一个简单的图像滑块/翻转器。我有一组带有文字的图像。使用下一个箭头显示下一个带有文本的图像，使用上一个箭头将显示上一个带有文本的图像。

“下一个箭头”效果完美。然而，“前一个箭头”的作用就好像多了一个图像。同样，这仅适用于前一个箭头，并且仅适用于图像（附件完整）而不是文本（frameData）。图像确实会循环播放，但之前会放入不存在的图像并丢弃文本（frameData）。

页面上的 HTML：

<div id="headerFrame"> 
    <span id="moveLeft"></span> 
    <span id="moveRight"></span> 
    <img width="329" height="239" src="http://beta.tortugatwins.com/wp-content/uploads/2011/07/hopeAvatar.png" class="attachment-full wp-post-image" alt="hopeAvatar" title="hopeAvatar" />
    <img width="329" height="239" src="http://beta.tortugatwins.com/wp-content/uploads/2011/06/firalicon.png" class="attachment-full wp-post-image" alt="firalicon" title="firalicon" />                                                            </div> 
<div id="featuredContent"> 
    <div class="frameData"> 
        <h1 class="headTitle">Test Me Again</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mauris quis ligula mattis bibendum. Nam accumsan libero eget arcu aliquet pretium sit amet sed lorem. Mauris porttitor, ipsum in mollis sagittis, turpis justo ultricies eros, vitae pellentesque magna sem &hellip; <a href="http://beta.tortugatwins.com/?p=6" class="excerpt-more-link">Continue reading</a></p> 
    </div> 
    <div class="frameData"> 
        <h1 class="headTitle">Hello world!</h1>
        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> 
    </div> 
</div>

页面上的 jquery：

$('#headerFrame .attachment-full, #featuredContent .frameData').css({'opacity':'0'});
$('#headerFrame .attachment-full:first, #featuredContent .frameData:first').addClass('show').css({'opacity':'1'});
$('#moveRight').click(function()
{
    var $currentFrame = $('#headerFrame .attachment-full.show');
    var $currentContent = $('#featuredContent .frameData.show');

    var $nextFrame = $currentFrame.next().length ? $currentFrame.next() : $('#headerFrame .attachment-full:first').addClass('show').animate({'opacity':'1'});
    var $nextContent = $currentContent.next().length ? $currentContent.next() : $('#featuredContent .frameData:first').addClass('show').animate({'opacity':'1'});

    $nextFrame.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentFrame.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});

    $nextContent.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentContent.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});
});
$('#moveLeft').click(function()
{
    var $currentFrame = $('#headerFrame .attachment-full.show');
    var $currentContent = $('#featuredContent .frameData.show');

    var $prevFrame = $currentFrame.prev().length ? $currentFrame.prev() : $('#headerFrame .attachment-full:last').addClass('show');
    var $prevContent = $currentContent.prev().length ? $currentContent.prev() : $('#featuredContent .frameData:last').addClass('show');

    $prevFrame.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentFrame.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});

    $prevContent.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentContent.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});
});

Answer 1

给你的 prev() 调用一个选择器，这样它就不会选择不是图像的同级（即组成当前实际上不可见的箭头的跨度）。