Twitter Bootstrap弹出窗口不能在Wordpress循环中工作


Twitter Bootstrap popovers not working in a Wordpress loop

我一直在尝试让引导弹出窗口在Wordpress循环中工作,但没有成功,这是我到目前为止所做的:

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

打印我想要的

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

然而,弹出窗口不显示悬停,我没有得到任何脚本错误,所以我在为什么弹出窗口不工作的损失,我有jQuery, bootstrap.js和bootstrap.css包含在页面加载。任何帮助将非常感激!

谢谢

当以数字开头时,类和id不起作用!

这是众所周知的东西,当你把类作为一个数字:

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

它不工作。在您的例子中,它是这样的:

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

类是一个纯数。5598。是行不通的。所以试着把它替换成:

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

还有一件事我怀疑的是,.popover()是一个函数,这是像实例化一样使用。所以,不要在.mouseenter()下给药。这样替换整个脚本:

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