Question

这是我的整个文件：

<!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在相应的'数据时间'毫秒之后添加“突出显示”类。

Answer 1

试试这个：

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

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

Answer 2

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

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

Answer 3

您的功能位于$(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>

Answer 4

JsFiddle示例

$(function(){

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

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

});

如何使用javascript超时来应用Jquery addClass

4 个答案: