如何让下一篇文章和上一篇文章进入AJAX格式的模式窗口?

时间:2021-11-10 作者:Victor Sokoliuk

在归档页面上,通过单击新闻项,我需要在模式窗口中实现新闻的外观。如果使用ajax,这里没有什么困难。

这是我的js代码:

const newsItem = document.querySelectorAll(\'.news-item\');
if(newsItem !== null){
    
    newsItem.forEach(item => {
        item.addEventListener(\'click\', function(){
            let dataAttribute = item.getAttribute(\'data-new-id\');
            $.ajax({
                type : \'POST\',
                url : wp_helper.ajax_url,
                data : {
                    postid : dataAttribute,
                    action : \'loadmodal\',
                },
                success : function( data ){
                    
                    $(\'#exampleModal .modal-body\').html(data);
                    lazyLoad();
                }
            });
        });
    }); 
}

$(\'.btn-close\').on(\'click\', function(){
    $(\'#modal-content\').empty();    
})
这是php函数的一部分

add_action( \'wp_ajax_loadmodal\', \'really_loadmodal\' );
add_action( \'wp_ajax_nopriv_loadmodal\', \'really_loadmodal\' );

function really_loadmodal() {

    $postid = $_POST[ \'postid\' ];
    $post   = get_post($postid );
    setup_postdata( $post );
    
    if (have_rows(\'news_content\',$postid)) {
        echo $post->ID;
        echo \'<div class="modal-header">
                <div class="navigation-arrows">
                    <div class="nav-arrow left"></div>
                    <div class="nav-arrow right"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>\';
           
        echo\'<div class="news-single">\';
            while (have_rows(\'news_content\',$postid)) : the_row();
                if (get_row_layout() == \'section_title\'){
                    
                /// Post data here
                
                }
                
            endwhile;
        echo\'</div>\';
    }
   wp_reset_postdata();
   wp_die();
}
这里您可以看到以下几行:

<div class="modal-header">
<div class="navigation-arrows">
    <div class="nav-arrow left"></div>
    <div class="nav-arrow right"></div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
它们意味着跳转到上一个和下一个帖子。如果我可以获得当前显示在模式窗口中的这些帖子的ID,我可以使用ajax轻松实现此功能。但我伤了头,花了很多时间,没有找到解决办法。伙计们,请帮忙,否则就不可能实现这个功能了?

1 个回复
SO网友:Victor Sokoliuk

我解决了这个问题,因为Tom J Nowell 他在评论中给了我正确的想法。为了获得上一篇和下一篇文章的标识符,一切都非常简单(但我自己没有想到),将它们包含到ajax请求中就足够了。这是它的外观:

<?php
   $post = get_post($post_id);
   $previous_post = get_previous_post();
   $next_post = get_next_post();
?>
<div data-next-id="<?php echo $next_post->ID; ?>" data-prev-id="<?php echo $previous_post->ID; ?>" data-new-id="<?php echo get_the_ID(); ?>" class="news-item">
在明信片中,创建了两个属性,其中传递了上一篇和下一篇文章的ID。

现在稍微修改了js代码:

if(prevPost !== null){
    prevPost.addEventListener(\'click\', function(){
        let prevAttribute = this.getAttribute(\'data-prev-id\');
        $.ajax({
            type : \'POST\',
            url : wp_helper.ajax_url,
            data : {
                postid : prevAttribute,
                action : \'loadprevpost\',
            },
            success : function( data ){
                
                $(\'#exampleModal .modal-body\').html(data);
                lazyLoad();
            }
        });
    })
}
和php函数:

add_action( \'wp_ajax_loadprevpost\', \'really_loadprevpost\' );
add_action( \'wp_ajax_nopriv_loadprevpost\', \'really_loadprevpost\' );

function really_loadprevpost() {

$postid = $_POST[ \'postid\' ];
$post   = get_post($postid );
setup_postdata( $post );

if (have_rows(\'news_content\',$postid)) {
       
    echo\'<div class="news-single">\';
        while (have_rows(\'news_content\',$postid)) : the_row();
            if (get_row_layout() == \'section_title\'){
                
            /// Post data here
            
            }
            
        endwhile;
    echo\'</div>\';
}
 wp_reset_postdata();
  wp_die();
 }
也许这个解决方案并不优雅,但它是有效的,对我来说,这是现在的主要问题。