Question

我是jQuery的初学者（我的英语也很差：p）

使用prevAll() / nextAll() jQuery函数时遇到问题。

这是我的HTML代码：

<div id="zone-presentation">
    <ul id="nav-pres">
        <li>
            <a class="navigation-pres on" id="nav-intro-pres">
                <img src="images/nav-intro.png" alt="Intro" />
                <span class="cache">
                    Intro
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-concep-pres">
                <img src="images/nav-conception.png" alt="Conception" />
                <span class="cache">
                    Conception
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-rea-pres">
                <img src="images/nav-realisation.png" alt="Réalisation" />
                <span class="cache">
                    Réalisation
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-post-pres">
                <img src="images/nav-post-prod.png" alt="Post-prod" />
                <span class="cache">
                    Post-prod
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-diff-pres">
                <img src="images/nav-diffusion.png" alt="Diffusion" />
                <span class="cache">
                    Diffusion
                </span>
            </a>
        </li>
    </ul>
    <div id="content-pres">
        <div id="intro-pres" class="bla-pres"></div>
        <div id="concep-pres" class="bla-pres"></div>
        <div id="rea-pres" class="bla-pres"></div>
        <div id="post-pres" class="bla-pres"></div>
        <div id="diff-pres" class="bla-pres"></div>
    </div>
</div>

这是我的jQuery代码：

   $('#nav-intro-pres').click(function(){
       if($('#intro-pres').css('top','100%')){
           $('#intro-pres').animate({top : '0'});
       } else if($('#intro-pres').css('top','-100%')){
           $('#intro-pres').nextAll('.bla-pres').animate({top : '100%'});
           $('#intro-pres').animate({top : '0'});
       }
   });

$('#nav-concep-pres').click(function(){
if($('#concep-pres').css('top','100%')){
    $('#concep-pres').animate({top : '0'});
    $('#concep-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#concep-pres').css('top','-100%')){
    $('#concep-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#concep-pres').animate({top : '0'});
}
});


$('#nav-rea-pres').click(function(){
if($('#rea-pres').css('top','100%')){
    $('#rea-pres').animate({top : '0'});
    $('#rea-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#rea-pres').css('top','-100%')){
    $('#rea-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#rea-pres').animate({top : '0'});
}
});

$('#nav-post-pres').click(function(){
if($('#post-pres').css('top','100%')){
    $('#post-pres').animate({top : '0'});
    $('#post-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#post-pres').css('top','-100%')){
    $('#post-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#post-pres').animate({top : '0'});
}
});


$('#nav-diff-pres').click(function(){
if($('#diff-pres').css('top','100%')){
    $('#diff-pres').animate({top : '0'});
    $('#diff-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#diff-pres').css('top','-100%')){
    $('#diff-pres').animate({top : '0'});
}
});

删除条件hasClass('on')一切正常......

我知道我的代码可能会减少，但由于我对jQuery的弱点，我不知道如何...

这是在线版本，它会有所帮助，我想： http://www.maximejimenez.fr/test_insieme/index.html 谢谢你的宝贵帮助！

Answer 1

问题是您的if语句没有按照您希望的方式执行。这句话：

if($('#rea-pres').css('top','100%'))

总是正确的，因为$('#rea-pres').css('top','100%')返回一个总是真实的jQuery对象。并且，因为这总是很简单，所以你永远不要执行else语句的if/else if条款。

如果您要检查top的CSS值是否等于'100%'，那么您必须使用以下内容：

if($('#rea-pres').css('top') === '100%')

Answer 2

以下是我的做法

var pages = ['intro', 'concep', 'rea', 'post', 'diff'],
    speed = 600;

$.each(pages, function(_,page) {
    var nav  = $('#nav-' + page + '-pres'),
        pres = $('#' + page + '-pres');

    if ( ! ( nav.hasClass('on') ) ) {
        nav.on('click', function() {
            var flag = $(this).data('flag');
            pres.animate({ top: 0 }, speed)
                .prevAll('.bla-pres')
                .animate({ top : flag ? '-100%' : '100%'}, speed);

            $(this).data('flag', !flag);
        });
    }
});

这更具动态性，避免一遍又一遍地编写相同的代码。它可能需要一些调整才能工作，因为我无需测试。

带有hasClass（）的nexAll（）/ prevAll（）和条件

2 个答案: