dongsui3297
2013-01-04 05:54
浏览 36
已采纳

Twitter Bootstrap popovers无法在Wordpress循环中运行

I have been trying to get bootstrap popovers to work within a Wordpress loop with no success, this is what I have so far :

<?php while($have_posts()): $the_post();
  $excerpt = strip_tags(get_the_excerpt());?>

  <a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a>

  <script>
  jQuery('.<?php echo the_ID()?>').mouseenter(function(){
    jQuery(this).popover({
      html: true,
      title: '<?php echo the_title();?>',
      trigger: 'manual',
      placement:'top',
      content:'<?php echo $excerpt;?>'
    }).popover('show');
  });
  </script>
<?php endwhile;?>

This prints what I expect

<a class="5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

etc...

However the popovers aren't displaying on hover and I'm not getting any script errors, so I'm at a loss for why the popovers aren't working, I do have jQuery, bootstrap.js, and bootstrap.css included on page load. Any help would be greatly appreciated!

Thanks

图片转代码服务由CSDN问答提供 功能建议

我一直试图在Wordpress循环中使用bootstrap popovers但没有成功,这就是我所拥有的 far:

 &lt;?php while($ have_posts()):$ the_post(); 
 $ excerpt = strip_tags(get_the_excerpt());?&gt; 
  
&lt; a class =“&lt;?php echo the_ID()?&gt;”  href =“&lt;?php echo the_permalink();?&gt;”&gt;&lt;?php echo the_title();?&gt;&lt; / a&gt; 
 
&lt; script&gt; 
 jQuery('。&lt;  ;?php echo the_ID()?&gt;')。mouseenter(function(){
 jQuery(this).popover({
 html:true,
 title:'&lt;?php echo the_title();?  &gt;',
触发器:'手动',
展示位置:'top',
 content:'&lt;?php echo $ excerpt;?&gt;'
})。popover('show'); \  n}); 
&lt; / script&gt; 
&lt;?php endwhile;?&gt; 
   
 
 

这打印出我期望的内容 \ n

 &lt; a class =“5598”href =“http://mysite.oom/post/”&gt;帖子标题&lt; / a&gt; 
 
&lt; script&gt; 
jQuery('。5598  ').mouseenter(function(){
 jQuery('。5598')。popover({
 html:true,
 title:'Post Title',
 trigger:'manual',
 placement:'  top',
 content:'Post Excerpt'
})。popover('show'); 
}); 
&lt; / script&gt; 
 
etc ... 
   
 
 

然而,弹出窗口没有显示悬停,我没有收到任何脚本错误,所以我不知道为什么弹出窗口不起作用 ,我在页面加载中包含了jQuery,bootstrap.js和bootstrap.css。 任何帮助将不胜感激!

谢谢

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doujing3896 2013-01-04 06:11
    已采纳

    Classes and IDs do not work when it starts with numbers!

    It is well known stuff that when you give class as a number:

    <div class="1234">...</div>
    

    It doesn't work. In your case, it is like this:

    <script>
    jQuery('.5598').mouseenter(function(){
      jQuery('.5598').popover({
        html: true,
        title: 'Post Title',
        trigger: 'manual',
        placement:'top',
        content:'Post Excerpt'
      }).popover('show');
    });
    </script>
    

    The class is a pure number. 5598. Doesn't work. So try replacing it with something like:

    <a class="p5598" href="http://mysite.oom/post/">Post Title</a>
    
    <script>
    jQuery('.p5598').mouseenter(function(){
      jQuery('.p5598').popover({
        html: true,
        title: 'Post Title',
        trigger: 'manual',
        placement:'top',
        content:'Post Excerpt'
      }).popover('show');
    });
    </script>
    

    And one more thing I doubt is, the .popover() is a function, that is to be used like instantiation. So, don't give it under .mouseenter(). Replace the whole script this way:

    <script>
    jQuery(document).ready(function(){
      jQuery('.p5598').popover({
        html: true,
        title: 'Post Title',
        trigger: 'manual',
        placement:'top',
        content:'Post Excerpt'
      })
      jQuery('.p5598').hover(function() {
        jQuery('.p5598').popover('show');
      }, function(){
        jQuery('.p5598').popover('hide');
      });
    });
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题