javascript - ajax 将帖子加载为整页幻灯片

Question

我一直在摸索这个问题，想知道是否有人有解决方案。实际上，我正在创建一个完整的视口(viewport) slider ，它将帖子动态加载到隐藏的 div 中，然后根据单击箭头的方向将其动画化到页面中。我可以让隐藏的 div 动画化，但是脚本在第一次单击后停止运行，因此所有其他帖子都不会被拉入。

HTML/PHP:

// First Div that hold all loaded data
<div id="Default" class="main">
    <div id="fullContent">
        <?php while ( have_posts() ) : the_post(); ?>
            <?php the_title(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>

        <div class="leftArrow">
            <?php previous_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
        <div class="rightArrow">
            <?php next_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
    </div>
</div>

// Second div where new content will be loaded
<div id="LoadAjax" class="direction"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

JQUERY

$.ajaxSetup({cache:false});

    $('body').on('click', '.rightArrow a', function(e){
        e.preventDefault();
        history.pushState({ path: this.path }, '', this.href);
        $('.direction').hide();
        RightSlide(this);
        return false;
    });

    $('body').on('click', '.leftArrow a', function(e){
        e.preventDefault();
        $('.direction').hide();
        history.pushState({ path: this.path }, '', this.href);
        LeftSlide(this);
        return false;
    });

    function RightSlide(that) {
        var post_id = $(that).attr('href');
        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'right'},600);
            },50);

            setTimeout(function(){
                $('#Default').addClass('direction').removeClass('main').empty();
                $('#LoadAjax').addClass('main').removeClass('direction');   
            },650);
            return false;
        });
    };

    function LeftSlide(that) {
        var post_id = $(that).attr('href');
        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'left'},600);
            },50);

            setTimeout(function(){
                $('#Default').addClass('direction').removeClass('main').empty();
                $('#LoadAjax').addClass('main').removeClass('direction');   
            },650);
            return false;
        });
    };

正如您在初始加载时看到的那样，一切都按预期工作，但是如果我再次单击右键，则不会执行任何操作。

我的问题，有没有办法在第二次点击时重置该功能？第二次点击时不运行的原因是什么？

感谢您的提前帮助。在这个主题上绝对是业余爱好者，因此我们将不胜感激任何反馈来帮助我学习。

干杯，

一个

编辑:添加附加脚本

解决方案:

$.ajaxSetup({cache:false});

    $('body').on('click', '.rightArrow a', function(e){
        e.preventDefault();
        history.pushState({ path: this.path }, '', this.href);
        $('.disableClicks').show();
        RightSlide(this);
        return false;
    });

    $('body').on('click', '.leftArrow a', function(e){
        e.preventDefault();
        $('.disableClicks').show();
        history.pushState({ path: this.path }, '', this.href);
        LeftSlide(this);
        return false;
    });

    function RightSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'right'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

    function LeftSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'left'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

Answer 1

我把我的jquery改成了这个，它成功了!希望这会帮助其他人!

$.ajaxSetup({cache:false});

$('body').on('click', '.rightArrow a', function(e){
    e.preventDefault();
    history.pushState({ path: this.path }, '', this.href);
    $('.disableClicks').show();
    RightSlide(this);
    return false;
});

$('body').on('click', '.leftArrow a', function(e){
    e.preventDefault();
    $('.disableClicks').show();
    history.pushState({ path: this.path }, '', this.href);
    LeftSlide(this);
    return false;
});

function RightSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'right'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};

function LeftSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'left'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};