如何在wordpress的分頁懸停事件中顯示其他頁面的Post標題（僅作為工具提示）？

Question

我正在使用Wordpress中的一個項目。 我有頁數一個博客與底部像一個分頁1 ， 2 ， 3等等。 我需要在頁碼的懸停事件上實現一個功能，該功能顯示具有該頁的帖子標題（作為列表）的工具提示，如以下屏幕快照所示：

我的博客頁面鏈接如下：

www.domain.com/page/1/ 
www.domain.com/page/2/ 
www.domain.com/page/3/
...

我是前端開發人員，對php有一點了解。 我沒有在Google上搜索過運氣。 誰能幫我實現這個目標？

謝謝！

編輯：

我可以通過發送Ajax請求來實現嗎？ 你可以在這里嘗試

Answer 1

我們假設導航看起來像這樣。

<div class="navigation">
    <ul>
        <li><a href="http://example.com/1" >Previous Page</a></li>
        <li><a href="http://example.com/">1</a></li>
        <li class="active"><a href="http://example.com/page/2/">2</a></li>
        <li><a href="http://example.com/page/3/">3</a></li>
        <li><a href="http://example.com/page/3/" >Next Page</a></li>
    </ul>
</div>

而且帖子標題看起來像這樣

<div class="post-header">
    <h2><a href="http://example.com/post-link/">Post Title</a></h2>
    <!-- some meta stuff goes here -->
</div>

好了，現在結束了，這里是ajax位

jQuery( function($){

    $("div.navigation a").mouseover(function(){ 
        // we'll need this for later use
        var thisTag = $(this);
        // no point in making another request if we already have the data
        if( $(this).data('hovered') ) {
            // this is where you'll trigger the saved tooltips
            console.log( thisTag.data('titles') );
            return;
        }
        // we'll add a flag to check whether we've already checked this link (in retrospect 'checked' would've been a better choice)
        $(this).data('hovered', true);
        // we don't have to do this but it looks cleaner
        var ajaxurl = $(this).attr('href');
        // pretty straight forward, we grab everything in the linked page (exactly what those infinite scroll plugins/themes do) and find the titles.
        $.ajax({
            url: ajaxurl,
            type: 'get',
            success: function(data) {
                var titles = [];
                // you'll have to modify the selector to match your theme
                $(data).find('.post-header h2 a').each( function(){
                    titles.push( $(this).text() );
                });                                
                // I'm doing this so that this can be retrived on subsequent hovers. however, this part should be replaced with the tooltip
                thisTag.data('titles', titles);
                console.log( titles );
            }
        });
    });

});

您必須調整選擇器以匹配您的主題，僅此而已。