如何使用Javascript超时来应用jQuery addClass

发布于 2024-11-19 04:07:37 字数 1060 浏览 2 评论 0原文

这是我的整个文档：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  .highlighted { color:green; font-weight:bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


function itemHighlight(n) 
{
      $(function() {
        $("ul > li:eq("+n+")").addClass("highlighted"); 
      });
}

NumofLi = $('li').length;

for(i = 0; i < NumofLi; i++) {
    var timeoutvar = $("ul > li:eq("+i+")").attr('data-time');
    setTimeout("itemHighlight("+i+")", timeoutvar);
}


});

</script>

</head>
<body>
  <ul>
    <li data-time="4000">foo</li>
    <li data-time="5000">foo</li>
    <li data-time="9000">foo</li>
    <li data-time="11000">foo</li>
    <li data-time="15000">foo</li>
  </ul>
</body>
</html>

我希望 li 在相应的“数据时间”毫秒之后添加“突出显示”类。

原文

Here is my entire document:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  .highlighted { color:green; font-weight:bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


function itemHighlight(n) 
{
      $(function() {
        $("ul > li:eq("+n+")").addClass("highlighted"); 
      });
}

NumofLi = $('li').length;

for(i = 0; i < NumofLi; i++) {
    var timeoutvar = $("ul > li:eq("+i+")").attr('data-time');
    setTimeout("itemHighlight("+i+")", timeoutvar);
}


});

</script>

</head>
<body>
  <ul>
    <li data-time="4000">foo</li>
    <li data-time="5000">foo</li>
    <li data-time="9000">foo</li>
    <li data-time="11000">foo</li>
    <li data-time="15000">foo</li>
  </ul>
</body>
</html>

I would like the li's to have the class "highlighted" added after their corresponding 'data-time' milliseconds.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

牵你手 2024-11-26 04:07:37

试试这个：

$(function(){
    $('li').map(function(){
        var _this = $(this);
        setTimeout(function(){
            _this.addClass('highlighted');
        },Number(_this.data('time')));
    });
});

工作示例： http://jsfiddle.net/AlienWebguy/dzAGn/2/

Try this:

$(function(){
    $('li').map(function(){
        var _this = $(this);
        setTimeout(function(){
            _this.addClass('highlighted');
        },Number(_this.data('time')));
    });
});

Working example: http://jsfiddle.net/AlienWebguy/dzAGn/2/

回复收藏 0 原文

马蹄踏│碎落叶 2024-11-26 04:07:37

$(document).ready(function()
{
    #("ul li")each(function()
    {
        var timeOut = Number( $(this).attr("data-time") );
        var element = $(this);

        setTimeout(function()
        {
            element.addClass('highlighted');
        },  timeOut);
    });
});

$(document).ready(function()
{
    #("ul li")each(function()
    {
        var timeOut = Number( $(this).attr("data-time") );
        var element = $(this);

        setTimeout(function()
        {
            element.addClass('highlighted');
        },  timeOut);
    });
});

回复收藏 0 原文

恍梦境° 2024-11-26 04:07:37

JsFiddle 示例

$(function(){

    $('li').each(function(){
        var _this = $(this);
        setTimeout($.proxy(timeout, _this), Number(_this.data('time')));
    });

    function timeout(){
        this.addClass('highlighted')
    }

});

JsFiddle example

$(function(){

    $('li').each(function(){
        var _this = $(this);
        setTimeout($.proxy(timeout, _this), Number(_this.data('time')));
    });

    function timeout(){
        this.addClass('highlighted')
    }

});

回复收藏 0 原文

傲娇萝莉攻 2024-11-26 04:07:37

您的函数位于 $(document).ready(...) 内。把它放在外面：

<script type="text/javascript">
$(document).ready(function() {
    NumofLi = $('li').length;
    for(i = 0; i < NumofLi; i++) {
        var timeoutvar = $("ul > li:eq("+i+")").attr('data-time');
        setTimeout("itemHighlight("+i+")", timeoutvar);
    }
});

function itemHighlight(n) {
    $(function() {
        $("ul > li:eq("+n+")").addClass("highlighted"); 
    });
}
</script>

Your functions is inside $(document).ready(...). Put it outside:

<script type="text/javascript">
$(document).ready(function() {
    NumofLi = $('li').length;
    for(i = 0; i < NumofLi; i++) {
        var timeoutvar = $("ul > li:eq("+i+")").attr('data-time');
        setTimeout("itemHighlight("+i+")", timeoutvar);
    }
});

function itemHighlight(n) {
    $(function() {
        $("ul > li:eq("+n+")").addClass("highlighted"); 
    });
}
</script>

回复收藏 0 原文

~没有更多了~