Question

我一直在摸不着头脑，想知道是否有人有解决方案。实际上，我正在创建一个完整的视口滑块，可以将帖子动态加载到隐藏的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;
        });
    };

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

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

感谢您的高级帮助。这个主题的绝对业余，所以任何反馈将不胜感激，以帮助我学习。

干杯，

A

编辑：添加了添加脚本

解决方案：

$.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;
    });
};

ajax加载帖子作为整页幻灯片

1 个答案: