Question

如何在特定时间间隔突出显示div中的文本。时间间隔已在每个div的“spacing”属性中提及。是否可以在setInterval或setTimeout函数中动态更改时间间隔。我编写了我正在使用的HTML和jquery代码的结构。

<html>
<head>
<style>
  .green_class{
   background-color:green;
  }
</style>

<script type="text/javascript">
   $(document).ready(function(){
     $("#btnclick").click(function(){
        var childs=$("#test").children();
        $(childs).each(function(){
         var time_interval=$(this).attr("intervals");
         setTimeout(function(){$(this).addClass("green_class");},parseInt(time_interval));
        });
     });
   });
</script>
</head>
<body>
    <div id="test" style="float:left">
        <div intervals="0">Lorem&nbsp;</div>
        <div intervals="500">Ipsum&nbsp;</div>
        <div intervals="800">is&nbsp;</div>
        <div intervals="1000">simply&nbsp;</div>
        <div intervals="1200">dummy&nbsp;</div>
        <div intervals="1400">text&nbsp;</div>
        <div intervals="1600">of&nbsp;</div>
        <div intervals="1800">the&nbsp;</div>
        <div intervals="2000">printing&nbsp;</div>
        <div intervals="2200">and&nbsp;</div>
        <div intervals="2400">typesetting&nbsp;</div>
        <div intervals="2600">industry</div>
    </div>
<input type="button" value="Highlight" id="btnclick"/>
</body>
</html>

上述脚本无法正常运行。是否可以动态更改setTimeout函数的持续时间。请提供宝贵的建议/解决方案。

Answer 1

您的expando属性“interval”应引用为attr("intervals")，而不是attr(intervals)

此外，我认为您可以childs.each而不是$(childs).each，因为childs已经是jQueryified对象。

Answer 2

重要代码http://jsfiddle.net/NyuWb/
您还在错误的上下文中调用$(this).addClass("green_class");。所以我的版本：

$("#btnclick").click(function() {
    $("#test").children().each(function() {
        var time_interval = $(this).attr('intervals'),
            _this = $(this);

        setTimeout(function() {
            _this.addClass("green_class");
        }, parseInt(time_interval));
    });
});

使用jquery逐字突出显示

2 个答案: