[英]Twitter Bootstrap popovers not working in a Wordpress loop
I have been trying to get bootstrap popovers to work within a Wordpress loop with no success, this is what I have so far : 我一直试图让自举弹出窗口在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;?>
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. 然而,弹出窗口没有显示悬停,我没有得到任何脚本错误,所以我不知道为什么弹出窗口不工作,我有jQuery,bootstrap.js和bootstrap.css包括在页面加载。 Any help would be greatly appreciated! 任何帮助将不胜感激!
Thanks 谢谢
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
. 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. 还有一件事我怀疑, .popover()
是一个函数,就像实例化一样。 So, don't give it under .mouseenter()
. 所以,不要在.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.