Почему Jquery .prev () показывает еще 1 элемент .next ()? - PullRequest
Новая
       8

Почему Jquery .prev () показывает еще 1 элемент .next ()?

0 голосов
/ 24 июля 2011

Я создаю то, что должно быть простым слайдером изображения / флиппером.У меня есть набор изображений с текстом.использование стрелки «стрелка» показывает следующее изображение с текстом, а предыдущая стрелка показывает предыдущее изображение с текстом.

«Следующая стрела» работает отлично.Тем не менее, «предыдущая стрелка» действует так, как будто есть еще одно изображение, чем есть.Опять же, это только с предыдущей стрелкой и ТОЛЬКО на изображениях (полное вложение), а НЕ на тексте (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'});
});

1 Ответ

1 голос
/ 24 июля 2011

Дайте вашему prev () вызвать селектор, чтобы он не выбирал братьев и сестер, которые не являются изображениями (т. Е. Промежутки, составляющие ваши стрелки, которые на самом деле не видны в данный момент.

...