從html數據設置jquery延遲

Question

我試圖從html中顯示下一個文本之前顯示的值中設置單獨的持續時間。我想也許我可以爲jquery.delay設置一個變量（多麼大），但它只是通過第一個「data-howlongtime」爲其餘的變量獲取值。 JSFiddle。除了一切之外，我做錯了什麼？

<div id="aboutid" data-howlongtime="10000"> 
    <p class="abouts">Less delay</p> 
</div> 
<div id="aboutid" data-howlongtime="20000"> 
    <p class="abouts">Long delay</p> 
</div> 

<style>.abouts {display: none;}</style> 

<script> 
var delayabout=1700; 
var howlong = $('#aboutid').data('data-howlongtime'); 

(function() { 

    var abouts = $(".abouts"); 
    var aboutIndex = -1; 

    function showNextabout() { 
     ++aboutIndex; 
     abouts.eq(aboutIndex % abouts.length) 
      .fadeIn(2000) 
      .delay(howlong) 
      .fadeOut(2000, showNextabout); 
    } 

    setTimeout(function(){ 
     showNextabout(); 
    }, delayabout); 

})(); 
</script> 

Answer 1

試試這個，你實際上是採取howlongtime頂部，只有一次，你需要檢查它的每一次迭代。

var delayabout = 1000; 

(function() { 

    var abouts = $(".abouts"); 
    var aboutIndex = -1; 

    function showNextabout() { 
    ++aboutIndex; 
    var $about = abouts.eq(aboutIndex % abouts.length), 
     howLong = $about.parents('div#aboutid').data('howlongtime'); 
     $about.fadeIn(2000) 
     .delay(howLong) 
     .fadeOut(2000, showNextabout); 
    } 

    setTimeout(function() { 
    showNextabout(); 
    }, delayabout); 

})();