我已将分页按钮的样式设置为绿色背景。当没有上一页（或下一页）时，分页链接会消失，但会留下一个没有文本的绿色空按钮。

我试着用JS来解决这个问题，把函数搞乱了。php函数和其他一些东西都没有用。

这是我在函数中的代码。php页面

function pagination_nav() {
    global $wp_query;

    if ( $wp_query->max_num_pages > 1) { ?>
        <nav class="pagination" role="navigation">
            <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( \'Previous\' ); ?></div>
            <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( \'Next\' ); ?></div>
        </nav>
<?php }
}

下面是在我的模板页面中调用函数的代码

    <div class="pag-container">
        <?php pagination_nav(); ?>
    </div>

这是我的SCS

.pag-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

    .pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64%;

        .pag-btn{
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image:linear-gradient(to bottom, $dark-green, $light-green);
            margin: 0rem 1rem;
        }

        a{
            color: white;
            font-size: 1.3rem;
        }
    }
}

这里是我尝试过的JS

const prvBtn = document.getElementById(\'prv\').innerHTML;
const nxtBtn = document.getElementById(\'nxt\').innerHTML;

function hidePagBttns() {
    if (prvBtn === \'\') {
        prvBtn.style.display = \'none\';
    } else {
        if (nxtBtn === \'\') {
            nxtBtn.style.display = \'none\';
        }
    }
}

     <nav class="pagination" role="navigation">
        <?php if( get_previous_posts_link() ) { ?>
        <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( \'Previous\' ); ?></div>
        <?php } 
        if( get_next_posts_link() ) { ?>
        <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( \'Next\' ); ?></div>
        <?php } ?>
    </nav>