Question

目前它在循环中一次自动播放1个Popover。但是，我想让它一次自动播放2个Popover。当然，在循环中。

将添加更多Popovers。我怎么做到这一点？

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> |
    <a href="#" title="Header" class="myclass p4" data-toggle="popover" data-trigger="hover" data-placement="bottom" 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) {
            $('.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 1

我找到了一个你正在寻找的实例。您可以指定要同时显示的popOver项目的数量，并且它将在每个时间间隔内继续向下（并在必要时循环返回）。我改变的第一件事是popOver类名。它们现在从p0-p1-p2-p3开始，使其与0索引数组一致。这使得代码中的-1更少。所以Html看起来像：

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

现在js功能很简单但是看起来可能有点令人困惑。您的第一个重要变量是 numConcrPopOver ，它定义了您想要显示的同时popOver项的数量。然后在interval函数中，代码填入2个索引数组;一个用于显示popOver项目的数量，另一个用于隐藏先前显示的项目。使用for循环并定义 numConcrPopOver ，它会创建这些列表。记下本节中多次使用的模运算符，它确保要显示和隐藏的元素保持在popOver项总数的长度内，当它超过此长度时循环回到开头。

在填充了这两个阵列后，首先我们需要删除 popToHide 数组中也存在于 popsToShow 数组中的所有项目。这适用于要显示的同时项目数大于总项目数的一半的情况。在这种情况下，由于第一次填充 popsToHide 数组的方式，它将包含也属于 popsToShow 数组的索引。因此，我们只需过滤 popsToHide 数组并删除重复项，以仅隐藏之前显示但当前未显示的popOver项目。

作为popOver项目序列的示例;如果你有4个popOver项目，并且你想一次显示3个。每个区间显示的popOvers的预期顺序是：

0-1-2   ->   1-2-3   ->   2-3-0  ->  3-0-1  ...

这个javascript是：

$(document).ready(function(){
var time = 1000;
var popOverLength = $('.myclass').length;
var popOverIdx = 0;
var numConcrPopOver = 2;
var fun = setInterval(function(){
    var popsToShow = []; //Array that will hold index of popOvver items to show
  var popsToHide = []; //Array that will hold index of popOvver items to hide
  //Loop for the number of simultanious popOver you want to show
  for(var popNum=0; popNum<numConcrPopOver; popNum++){
    var currPopIdx = popOverIdx+popNum; //Index o fthe current  popOver to show
    popsToShow.push(currPopIdx%popOverLength); //Alwyas mod index to keep within lenght of popOver items
    var hidePopIdx = popOverIdx-1-popNum; //The index of the previous popOver item to hide
    if(hidePopIdx < 0){
        hidePopIdx = popOverLength-1-popNum
    }
    popsToHide.push(hidePopIdx%popOverLength);
  }
  popOverIdx+=numConcrPopOver;
  popOverIdx%=popOverLength;
  //Remove from popToHide array any items in the popToShow array.
  //This is done for the scenarios where the numebr of popovers to
  //Show in greater than half the total number of popovers, 
  //otherwise will hide immediatly after showing
  popsToHide = popsToHide.filter(function(itm) {return popsToShow.indexOf(itm) < 0;});
  popsToShow.forEach(function(itm){ //Iteratre of popOver items to show them
     $('.p'+itm).popover('show');
  });
  popsToHide.forEach(function(itm){ //Iteratre of popOver items to hide them
     $('.p'+itm).popover('hide');
  });
}, time);
});

您可以通过更改 numConcrPopOver 变量来测试不同数量的同时弹出窗口。我已经更新了你的jsfiddle以包含新代码： here

一次自动播放两个Bootstrap Popover而不是一个

1 个答案: