使用jQuery創建文本循環

Question

我想用jQuery製作一些東西，但它不能正常工作。

這裏我的HTML標記：

<div class="addv" data-plus="Execution capability both in Europe and Asia, ensuring 24/7 reactivity"> 
    Reactivity &amp; Proactivity 
</div> 

<div class="addv" data-plus="Prestigious MNCs : Over 70% LOI signed,Over 60% of closing"> 
    Track Record 
</div> 

<div class="addv-central"> 
    Transaction Excellence 
</div> 

<div class="addv" data-plus="Over 5,000 firms and 500 PE HNWI, family office in our « in house » databases"> 
    Our proprietary Databases 
</div> 

<div class="addv" data-plus="Multicultural team posses the solid expertise in our key sectors and countries"> 
    Sector &amp; Country Expertise 
</div> 

這裏我jQuery代碼：

$(document).ready(function(){ 
$(".addv").each(function(i, current){ 
    setInterval(function() { 
    $(".addv-central").text($(".addv").data("plus")); 
    }, 2000); 
}); 

我想讓出現坐落在申報單 「.adv」 文中的 「副中央」 我試圖用「循環」（每個+ setIntervall）來做，但它不起作用。

謝謝你的幫助！

Answer 1

你的jQuery代碼

JSFIDDLE DEMO

末錯過了});，如果你想merge所有addv格data-plus屬性值addv-central 必須使用setinterval前.each功能

$(document).ready(function(){ 
    setInterval(function() { 
     centralData = ""; 
     $(".addv").each(function(i, current){ 
     centralData += $(current).data("plus") ;   
     }); 
     $(".addv-central").text(centralData); 
    }, 2000); 
}); 

JSFIDDLE DEMO

Answer 2

使用計數器變量和.eq()選擇所需的元素

$(document).ready(function(){ 
    var dataP = $('.addv'); 
    var cnt = 0; 
    setInterval(function(){ 
     cnt==dataP.length-1?cnt=0:cnt++; 
     $('.addv-central').text(dataP.eq(cnt).data('plus')); 
    },2000); 
}); 

DEMO

Answer 3

我希望這是你的所期待的。

$(document).ready(function() { 

    var dataPlus = ''; 

    $(".addv").each(function (i, current) { 
     dataPlus = dataPlus + "," + $(current).data("plus"); 
    }); 

    $(".addv-central").text(dataPlus); 

}); 

Answer 4

要調用setInterval爲您的每個元素，你應該通過元素調用它只是一次循環。

jQuery的

$(document).ready(function() { 
    var i = 0; 
    var $elems = $('.addv'); 
    var length = $elems.length; 

    setInterval(function() { 
     $elems 
      .removeClass('active') 
      .eq(i++ % length) 
       .addClass('active') 
       .css('opacity', 0).animate({'opacity': 1}); 

    }, 1000); 
}); 

CSS

.addv { 
    display: none; 
} 

.addv.active { 
    display: block; 
} 

jsFiddle Demo。