玩自舉酥料餅上環

DEMO：http://jsfiddle.net/0s730kxx/玩自舉酥料餅上環

我試圖打開引導酥料餅的自動開上環，但到目前爲止，我有隻管理到自動播放一次。

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

來源

2017-04-21 Elaine Byene

您不能清除的時間間隔，並期望循環繼續！而不是清除將計數設置爲0.但您還需要記住隱藏最後的彈出窗口。 –

修改的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); 
});

既然你不清除在該修改的摘錄的時間間隔，它會永遠運行爲你的預期。

來源

2017-04-21 19:13:00

謝謝。是否有可能一次顯示2個popover？ –

您可以執行以下操作：$（'。p'+ count）.popover（'show'）; （'。p'+（count + 1））。popover（'show'）;但現在，你需要照顧你的邏輯。 –

那是因爲你已經添加的行

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

顯示他們1周時間計數爲3和clearInterval(fun)被稱爲終止進一步的呼叫功能fun()後。

來源

2017-04-21 19:03:08

原創評論：您無法清除間隔並期望循環繼續！而不是清除將計數設置爲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/

來源

2017-04-21 19:08:02

簡單和模運算是你的朋友：

$(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/

來源

2017-04-21 19:53:05 SpencerD

謝謝。我將其他答案標記爲正確。別介意。我可以知道爲什麼有理由使用if和else語句，因爲這是一個靜態數據，並且總會有數據？我還是新手，學習JS。 –

@ElaineByene，一切都很好。我在那裏使用了一個if語句，因爲如果頁面沒有「.myclass」的元素，那麼調用'.eq（...）。popover（...）'會在JS代碼中拋出一個錯誤。這個錯誤不會是一個大問題，但在我看來，做適當的錯誤檢查總是更好。當然，在頁面上沒有「.myclass」元素的可能性非常低，因爲您已經使用該類編寫了包含多個元素的頁面，但爲了最佳實踐等原因，我將其放入了該頁面。但是，如果您知道這些元素將始終存在，則可以將其刪除。 – SpencerD

玩自舉酥料餅上環

回答

相關問題