一次自动播放两个bootstrap弹出式弹出声而不是一个

Question

http://jsfiddle.net/umpe9a9j/

当前，它一次在循环中一次自动播放1个弹出窗口。但是，我想一次让它自动播放2个弹出声。当然，在循环中。

将添加更多的弹出窗口。我该怎么做？

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

我得到了您要寻找的内容的工作示例。您可以指定同时显示的弹出项目的数量，并且每个间隔都将继续沿链条(并在必要时循环(。我更改的第一件事是弹出类名称。他们现在从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功能很简单，但是A可能有些混乱。您的第一个重要变量是 numConconcrpopover ，这定义了您要显示的同时弹出项目的数量。然后，在间隔函数中，代码填充了2个索引阵列；一个用于显示弹出项目的数量，另一个用于以前显示的隐藏项目。使用for loop和定义的 numconcropopover ，它创建了这些列表。请注意本节中多次使用的Modulo操作员，以确保显示和隐藏的元素保留在弹出项目总数的长度内，并在此长度超过此长度时循环回到开始。

填充了这两个数组后，首先我们需要删除 poptohide 数组中在 popstoshow 组中也存在的任何项目。这是针对同时显示的项目数量大于总项目的一半的场景。在这种情况下，由于 popstohide 数组首先填充的方式，它将包含索引，这些索引也属于 popstoshow array。因此，我们只需过滤 popstohide 数组，然后删除重复项即可隐藏以前显示但目前显示的弹出式项目。

作为弹出项目序列的示例；如果您总共有4个弹出案件，并且想一次显示3个。每个间隔显示的弹出案的预期顺序为：

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 变量来测试不同数量的同时弹出案。我已经更新了yous jsfiddle以包括新代码： eke