从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); 

})();