Question

我正在尝试打开Bootstrap Popover以自动打开循环但到目前为止我已经只管理了一次自动播放。

HTML：

<div class="container">
    <a href="#" title="Header"class="myclass p1" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Some content">Hover Left</a> | 
    <a href="#" title="Header"class="myclass p2" data-toggle="popover" data-trigger="hover" data-placement="right" class="myclass" data-content="Some content">Hover Right</a> | 
    <a href="#" title="Header" class="myclass p3" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some content Yo Bestie">Click Me</a>
</div>

JS：

$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
  count++;
  if(count>len){
    clearInterval(fun);
  }
    $('.p'+count).popover('show');
  if(count>1){
    var pre = count-1;
    $('.p'+pre).popover('hide');
  }
}, time);
});

有人可以帮忙吗？我希望它循环播放，因此它可以永久播放或至少播放10或20次。

Answer 1

那是因为你添加了行

if(count>len){
 clearInterval(fun);
}

显示它们后，1次计数为3，并调用clearInterval(fun) 它终止了对函数fun()的进一步调用。

Answer 2

原始评论：您无法清除间隔并期望循环继续！而不是清除将计数设置回0.但是你还需要记住隐藏最后一个弹出窗口。

var fun = setInterval(function(){
  count++;
  $('.p' + count).popover('show');

  if(count > 1){
    $('.p' + (count - 1)).popover('hide');
  }

  if(count > len){
    count = 0;
  }  
}, time);

这是一个小提琴：http://jsfiddle.net/89gcqnfm/

Answer 3

修改小提琴的javascript部分，如下所示：

$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
  count++;
  if(count>len){

    $('.p'+(count-1)).popover('hide');
    count = 1;
    //clearInterval(fun);
  }
    $('.p'+count).popover('show');
  if(count>1){
    var pre = count-1;
    $('.p'+pre).popover('hide');
  }
}, time);
});

由于您未在此修改后的代码段中清除时间间隔，因此它将按预期永久运行。

Answer 4

简单和模块化算术是你的朋友：

$(document).ready(function(){
var time = 1000;
var eles = $('.myclass');
var count = 0;
var fun = setInterval(function(){
    if(eles.length < 1)
       return (console.log("No elements found!")&&!1) || clearInterval(fun);

    eles.eq(count%eles.length).popover('hide');
    eles.eq(++count%eles.length).popover('show');
}, time);
});

https://jsfiddle.net/L2487dfy/

在循环播放Boostrap Popover

4 个答案: