Как использовать тайм-аут JavaScript, чтобы применить Jquery addClass - PullRequest
Новая
       9

Как использовать тайм-аут JavaScript, чтобы применить Jquery addClass

0 голосов
/ 11 июля 2011

вот мой весь документ: 

<!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 был добавлен класс "подсвеченный" после их соответствующих миллисекунд "данных-времени".

Ответы [ 4 ]

1 голос
/ 11 июля 2011 
$(document).ready(function()
{
    #("ul li")each(function()
    {
        var timeOut = Number( $(this).attr("data-time") );
        var element = $(this);

        setTimeout(function()
        {
            element.addClass('highlighted');
        },  timeOut);
    });
});
1 голос
/ 11 июля 2011

Попробуйте это: 

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

Рабочий пример: http://jsfiddle.net/AlienWebguy/dzAGn/2/

0 голосов
/ 11 июля 2011

JsFiddle пример 

$(function(){

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

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

});
0 голосов
/ 11 июля 2011

Ваши функции внутри $(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>
...