How to use Javascript timeout to apply jQuery addClass_问答_开发者

How to use Javascript timeout to apply jQuery addClass

开发者 https://www.devze.com 2023-03-19 12:08 出处：网络

Here is my entire document: <!DOCTYPE html> <html> <head> <style type="text/css">

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 h开发者_开发百科ave the class "highlighted" added after their corresponding 'data-time' milliseconds.

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/

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

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

JsFiddle example

$(function(){

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

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

});

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>