如何在wordpress的分页悬停事件中显示其他页面的帖子标题（仅作为工具提示）？

问题描述：

I am working on a project in Wordpress. I have a blog with number of pages with a pagination at bottom like 1, 2, 3 and so on. I need to implement a functionality on hover event of a page number which show a tooltip having post's header (as a list) of that page like shown in below screenshot:

My blog pages links are like :

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

I am a front-end developer and have a little knowledge in php. I searched on google with no luck. Can anyone help how can I achieve this?

Thanks!

Edited:

Can I achieve it by sending ajax requests. You might try here

我正在使用Wordpress中的项目。我有一个博客，页面数量在底部有一个分页，如1 code>， 2 code>， 3 code>等等。我需要在页码的悬停事件上实现一个功能，该事件显示一个工具提示，该工具提示具有该页面的帖子标题（作为列表），如下面的屏幕截图所示： p>

p>


我的博客页面链接如下： p> 
 
 
  www.domain.com/page/1/ 
www。  domain.com/page/2/ 
www.domain.com/page/3/ 
 ... 
  code>  pre> 
 
 我是一名前端开发人员并拥有 在PHP中的一点知识。 我在谷歌搜索没有运气。 任何人都可以帮助我如何实现这一目标？   p> 
 
 
谢谢！ p> 
 
 
 已编辑： strong>  p> 
 
 
我可以通过发送来实现吗 ajax请求。 您可以尝试 此处 strong>   p> 
  div  >

答

let's assume that the navigation looks like this.

<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>

and that the post headers look like this

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

alright, now that that's over here's the ajax bit

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

});

you'll have to adjust the selectors to match your theme and that's it.

如何在wordpress的分页悬停事件中显示其他页面的帖子标题（仅作为工具提示）？

相关推荐