jquery定时遍历元素的问题
刚学
JQuery
,希望实现这样一个效果：在如下的标签中，循环遍历
one
,
two
,
three
,
four
，每隔1秒钟设置下一个标签的属性，实现类似于“轮询”的效果。
<div id="radio">
<div id="one" class="hilite">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
我写了一个实现，但是似乎不起作用。请问是什么地方出现了问题？另外还有更佳的实现方式吗?
$(document).ready(function () {
function select($pri) {
var $current = $pri.next();
$current.radioClass('hilite');
setTimeout(function() { select($current); }, 1000);
}($('#one'));
});
$.fn.radioClass = function (cls) {
return this.siblings().removeClass(cls).end().addClass(cls);
}
四月一日君尋
8 years, 8 months ago
Answers
我动手写了下，主要思路是使用setInterval每隔1秒调用一次更换class hilite的函数；
jQuery代码如下：
<script type="text/javascript">
$(function (){
var shiftClass=function (){ //定义函数，使得具有.hilite类的下一个元素具有该class
var $startItem=$('.hilite'); // 获取当前的.hilite类所在元素并存在变量中，会经常调用
if ( $startItem.next().length) //判断当前具有hilite的元素是不是最后一个，如不是就把hilite传给下一个元素
{ $startItem.removeClass('hilite'); //移除当前元素的hilite类
$startItem=$startItem.next(); //获取下一个元素并赋予hilite类
$startItem.addClass('hilite');
}
else //如果当前具有hilite类的元素是最后一个元素了
{ $startItem.removeClass('hilite'); //移除它的hilite类属性
$startItem=$('#radio div').eq(0); //让$startItem重新定位到第一个位置并赋予类属性
$startItem.addClass('hilite'); }
};
setInterval(shiftClass, 1000); //每隔1秒就调用一次函数
})
</script>
body部分的内容就是你的：
<body>
<div id="radio">
<div id="one" class="hilite">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
</body>
为了凸显这种交替的效果，设置了一段css
<style type="text/css">
.hilite{color:red;font-weight:bold;}
</style>
最终的效果就是每隔一秒，每隔div中的内容就变为红色加粗字体；
![图片描述][1]
触手菊花兽
answered 8 years, 8 months ago
把你想要执行的内容写成 fucntion，塞入 setTimeout 就可以了。
$(function() {
var selector = $('#onem,#two,#three,#four');
var timeoutCallback = function() {
var current = selector.filter('.hilite');
var next = current.next();
if( next.length <= 0 ) {
return false;
}
next.addClass('hilite');
selector.removeClass('hilite');
}
setTimeout(timeoutCallback, 1000);
});
另外，这个简单的示例不会一直循环下去的，因为当 .hilite 到最后一个元素时，timeoutCallback 将返回 false，你可以判断，当最手一个时，重新从第 1 个开始。
奔跑的小欣
answered 8 years, 8 months ago
1.
$(document).ready(function () {
function select($pri) {
var $current = $pri.next();
$current.radioClass('hilite');
setTimeout(function() { select($current); }, 1000);
}($('#one'));
//这个写法是有问题的
//上述的写法只是 声明了一个select函数，进行了一个($('#one'))表达式求值
//并没有起到定义后立即执行的效果
});
//如果可达到你想要的效果
$(document).ready(function () {
(function select($pri) {
var $current = $pri.next();
$current.radioClass('hilite');
setTimeout(function() { select($current); }, 1000);
}($('#one')));
});
2.next方法不会自动回到头部，所以执行完最后一个兄弟节点后，就没有效果了
你需要在遍历到最后一个后，执行prev，从后往前遍历，到头后再next
那里不可以
answered 8 years, 8 months ago