使用jQuery创建文本循环
我想用jQuery做点什么,但它不能正常工作 这里是我的html标记:使用jQuery创建文本循环,jquery,loops,Jquery,Loops,我想用jQuery做点什么,但它不能正常工作 这里是我的html标记: <div class="addv" data-plus="Execution capability both in Europe and Asia, ensuring 24/7 reactivity"> Reactivity & Proactivity </div> <div class="addv" data-plus="Prestigious MNCs : Over
<div class="addv" data-plus="Execution capability both in Europe and Asia, ensuring 24/7 reactivity">
Reactivity & 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 & Country Expertise
</div>
我想使位于“adv central”中divs“.adv”中的文本出现
我试图用一个“循环”(each+setIntervall)来实现它,但它不起作用
谢谢你的帮助 你错过了一个})代码>在jquery代码的末尾
如果要将合并
alladdv
divdata plus
属性值合并到addv central
必须在之前使用setinterval
。每个函数
$(document).ready(function(){
setInterval(function() {
centralData = "";
$(".addv").each(function(i, current){
centralData += $(current).data("plus") ;
});
$(".addv-central").text(centralData);
}, 2000);
});
使用计数器变量和.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);
});
我希望这就是您想要的
$(document).ready(function () {
var dataPlus = '';
$(".addv").each(function (i, current) {
dataPlus = dataPlus + "," + $(current).data("plus");
});
$(".addv-central").text(dataPlus);
});
您正在为每个元素调用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;
}
.非常感谢大家!
.addv {
display: none;
}
.addv.active {
display: block;
}