将类名从div移到div
将类名从div移到div
提问于 2015-04-30 14:58:27
我试图在短时间延迟(可能10秒左右)后将类名移到div上。
我希望下面的3个类在div's和循环到达最后一个之后再移动。
例如：
<div class="wrapper">
<div></div>
<div></div>
<div class="previous-one"></div>
<div class="in-focus"></div>
<div class="next-one"></div>
<div></div>
<div></div>
</div>将转到：
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div class="previous-one"></div>
<div class="in-focus"></div>
<div class="next-one"></div>
<div></div>
</div>我希望这是有意义的，这是我在这里的第一篇文章，所以没有什么比从一个复杂的开始。
感谢你的回应。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-04-30 15:22:19
您应该尝试以下jquery解决方案：
var colors = ['blue', 'green', 'red'],
timer = 1000;
setInterval(function() {
for(var c in colors) {
var $current = $('.' + colors[c]),
$next = $current.next('li');
if($next.length == 0) {
$next = $('ul li:first-child');
}
$current.removeClass(colors[c]);
$next.addClass(colors[c]);
}
}, timer);.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>lorem</li>
<li class="blue">ipsum</li>
<li class="green">dolor</li>
<li class="red">hello</li>
<li>world</li>
<li>again</li>
</ul>
Stack Overflow用户
发布于 2015-04-30 15:30:16
一步一步想一想。
- 查找包装器中所有div的列表。
- 从相应的元素中移除“前一个”类。
- 将“焦点”改为“前一”。
- 将"next-one“改为"in-focus”。
- 在对焦后检查是否有元素。
- 如果有的话，把它写成“下一个”。
- 否则，做第一张单子"next-one“。
- 冲洗并重复。
http://jsfiddle.net/thePivottt/9m63rouu/
function scrollFocus() {
var elements = $(".wrapper div");
var nextOne = elements.filter(".next-one");
var inFocus = elements.filter(".in-focus");
elements.filter(".previous-one").removeClass("previous-one");
inFocus.removeClass("in-focus");
inFocus.addClass("previous-one");
nextOne.removeClass("next-one");
nextOne.addClass("in-focus");
var newNext = nextOne.next("div");
if (newNext.length == 0) newNext = elements.first();
newNext.addClass("next-one");
}
setInterval(scrollFocus, 1000);Stack Overflow用户
发布于 2015-04-30 15:33:13
这是我的解决办法。通过更改下一个div的类来推进每个div，然后删除当前div的类。如果它是包装器中的最后一个div，那么将该类移动到第一个div。这是小提琴https://jsfiddle.net/cyjm5toa/
不是最优雅的代码，但工作良好。
setInterval(function(){
if($('.wrapper div').last()[0]==$('.next-one')[0]){
$('.next-one').removeClass('next-one');
$('.wrapper div').first().addClass('next-one');
}
else{
$('.next-one').removeClass('next-one').next().addClass('next-one');
}
if($('.wrapper div').last()[0]==$('.previous-one')[0]){
$('.previous-one').removeClass('previous-one');
$('.wrapper div').first().addClass('previous-one');
}
else{
$('.previous-one').removeClass('previous-one').next().addClass('previous-one');
}
if($('.wrapper div').last()[0]==$('.in-focus')[0]){
$('.in-focus').removeClass('in-focus');
$('.wrapper div').first().addClass('in-focus');
}
else{
$('.in-focus').removeClass('in-focus').next().addClass('in-focus');
}
},1000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29971093
复制相关文章
相似问题
腾讯云开发者
